CSS modules ➡️ Stitches 🧵 (#799)

components/PageTitle/PageTitle.tsx

@@ -1,22 +1,37 @@
 import { useRouter } from "next/router";
-import Link from "next/link";
-import classNames from "classnames";
+import NextLink from "next/link";
+import { styled } from "../../lib/styles/stitches.config";
 import { baseUrl } from "../../lib/config";
+import type { ComponentProps } from "react";
 
-import styles from "./PageTitle.module.css";
+const Title = styled("h1", {
+  marginTop: 0,
+  marginBottom: "0.6em",
+  fontSize: "2em",
+  textAlign: "center",
 
-export type PageTitleProps = JSX.IntrinsicElements["h1"];
+  "@mobile": {
+    fontSize: "1.8em",
+  },
+});
 
-const PageTitle = ({ className, children, ...rest }: PageTitleProps) => {
+const Link = styled("a", {
+  color: "$text",
+  textDecoration: "none",
+});
+
+export type PageTitleProps = ComponentProps<typeof Title>;
+
+const PageTitle = ({ children, ...rest }: PageTitleProps) => {
   const router = useRouter();
   const canonical = `${baseUrl}${router.pathname}/`;
 
   return (
-    <h1 className={classNames(styles.title, className)} {...rest}>
-      <Link href={canonical}>
-        <a className={styles.link}>{children}</a>
-      </Link>
-    </h1>
+    <Title {...rest}>
+      <NextLink href={canonical} passHref={true}>
+        <Link>{children}</Link>
+      </NextLink>
+    </Title>
   );
 };