Migrate to app router (#2254)

components/Heading/Heading.tsx

@@ -1,70 +1,27 @@
 import innerText from "react-innertext";
+import clsx from "clsx";
 import HeadingAnchor from "../HeadingAnchor";
-import { styled, theme } from "../../lib/styles/stitches.config";
-import type { ComponentPropsWithoutRef } from "react";
+import type { JSX, ComponentPropsWithoutRef } from "react";
 
-const Anchor = styled(HeadingAnchor, {
-  margin: "0 0.4em",
-  padding: "0 0.2em",
-  color: theme.colors.medium,
-  opacity: 0, // overridden on hover below (except on small screens)
+import styles from "./Heading.module.css";
 
-  "&:hover, &:focus-visible": {
-    color: theme.colors.link,
-  },
-
-  "@medium": {
-    margin: "0 0.2em",
-    padding: "0 0.4em",
-
-    // don't require hover to show anchor link on small (likely touch) screens
-    opacity: 1,
-  },
-});
-
-const H = styled("h1", {
-  marginTop: "1em",
-  marginBottom: "0.5em",
-  lineHeight: 1.5,
-
-  // offset (approximately) with sticky header so jumped-to content isn't hiding behind it.
-  // note: use rem so it isn't based on the heading's font size.
-  scrollMarginTop: "5.5rem",
-
-  "@medium": {
-    scrollMarginTop: "6.5rem",
-  },
-
-  // show anchor link when hovering anywhere over the heading line, or on keyboard tab focus
-  [`&:hover ${Anchor}, ${Anchor}:focus-visible`]: {
-    opacity: 1,
-  },
-
-  variants: {
-    // subtle horizontal rule under the heading, set by default on `<h2>`s
-    divider: {
-      true: {
-        paddingBottom: "0.25em",
-        borderBottom: `1px solid ${theme.colors.kindaLight}`,
-      },
-      false: {},
-    },
-  },
-});
-
-export type HeadingProps = ComponentPropsWithoutRef<typeof H> & {
+export type HeadingProps = ComponentPropsWithoutRef<"h1"> & {
   level: 1 | 2 | 3 | 4 | 5 | 6;
   divider?: boolean;
 };
 
-const Heading = ({ level, id, divider, children, ...rest }: HeadingProps) => {
+const Heading = ({ level, id, divider, className, children, ...rest }: HeadingProps) => {
+  const HWild: keyof JSX.IntrinsicElements = `h${level}`;
+
   return (
-    <H as={`h${level}` as keyof JSX.IntrinsicElements} id={id} divider={divider || level === 2} {...rest}>
+    <HWild id={id} className={clsx(styles.h, (divider || level === 2) && styles.divider, className)} {...rest}>
       {children}
 
       {/* add anchor link to H2s and H3s. ID is either provided or automatically generated by rehype-slug. */}
-      {id && (level === 2 || level === 3) && <Anchor id={id} title={innerText(children)} />}
-    </H>
+      {id && (level === 2 || level === 3) && (
+        <HeadingAnchor id={id} title={innerText(children)} className={styles.anchor} />
+      )}
+    </HWild>
   );
 };