Migrate to app router (#2254)

components/OctocatLink/OctocatLink.module.css

@@ -0,0 +1,16 @@
+.octocatLink {
+  margin: 0 0.4em;
+  color: var(--colors-text) !important;
+}
+
+.octocatLink:hover,
+.octocatLink:focus-visible {
+  color: var(--colors-link) !important;
+}
+
+.octocat {
+  display: inline;
+  width: 1.2em;
+  height: 1.2em;
+  vertical-align: -0.2em;
+}

components/OctocatLink/OctocatLink.tsx

@@ -1,14 +1,9 @@
 import Link from "../Link";
 import { SiGithub } from "react-icons/si";
-import { styled, theme } from "../../lib/styles/stitches.config";
 import type { ComponentPropsWithoutRef } from "react";
 
-const Octocat = styled(SiGithub, {
-  display: "inline",
-  width: "1.2em",
-  height: "1.2em",
-  verticalAlign: "-0.2em",
-});
+import styles from "./OctocatLink.module.css";
+import clsx from "clsx";
 
 export type OctocatLinkProps = Omit<ComponentPropsWithoutRef<typeof Link>, "href"> & {
   repo: string;
@@ -16,20 +11,8 @@ export type OctocatLinkProps = Omit<ComponentPropsWithoutRef<typeof Link>, "href
 
 const OctocatLink = ({ repo, className, ...rest }: OctocatLinkProps) => {
   return (
-    <Link
-      href={`https://github.com/${repo}`}
-      underline={false}
-      css={{
-        margin: "0 0.4em",
-        color: theme.colors.text,
-
-        "&:hover, &:focus-visible": {
-          color: theme.colors.link,
-        },
-      }}
-      {...rest}
-    >
-      <Octocat className={className} />
+    <Link href={`https://github.com/${repo}`} underline={false} className={styles.octocatLink} {...rest}>
+      <SiGithub className={clsx(styles.octocat, className)} />
     </Link>
   );
 };