CSS modules ➡️ Stitches 🧵 (#799)

components/Selfie/Selfie.tsx

@@ -1,20 +1,66 @@
 import { memo } from "react";
-import Link from "next/link";
-import Image from "next/image";
-import classNames from "classnames";
-
-import styles from "./Selfie.module.css";
+import NextLink from "next/link";
+import NextImage from "next/image";
+import { styled } from "../../lib/styles/stitches.config";
+import type { ComponentProps } from "react";
 
 import selfieJpg from "../../public/static/images/selfie.jpg";
 
-export type SelfieProps = {
-  className?: string;
-};
+const ConstrainImage = styled("div", {
+  width: "50px",
+  height: "50px",
+  lineHeight: 0,
+  padding: 0,
 
-const Selfie = ({ className }: SelfieProps) => (
-  <Link href="/">
-    <a className={classNames(styles.link, className)}>
-      <div className={styles.selfie}>
+  "@mobile": {
+    width: "70px",
+    height: "70px",
+  },
+});
+
+const Image = styled(NextImage, {
+  border: "1px solid $light !important",
+  borderRadius: "50%",
+
+  "@mobile": {
+    borderWidth: "2px !important",
+  },
+});
+
+const Link = styled("a", {
+  display: "inline-flex",
+  alignItems: "center",
+  color: "$mediumDark",
+  textDecoration: "none",
+
+  "&:hover": {
+    color: "$link",
+
+    "@mobile": {
+      [`${Image}`]: {
+        borderColor: "$linkUnderline !important",
+      },
+    },
+  },
+});
+
+const Name = styled("span", {
+  margin: "0 0.6em",
+  fontSize: "1.2em",
+  fontWeight: 500,
+  lineHeight: 1,
+
+  "@mobile": {
+    display: "none",
+  },
+});
+
+export type SelfieProps = ComponentProps<typeof Link>;
+
+const Selfie = ({ ...rest }: SelfieProps) => (
+  <NextLink href="/" passHref={true}>
+    <Link {...rest}>
+      <ConstrainImage>
         <Image
           src={selfieJpg}
           alt="Photo of Jake Jarvis"
@@ -24,10 +70,10 @@ const Selfie = ({ className }: SelfieProps) => (
           layout="intrinsic"
           priority
         />
-      </div>
-      <span className={styles.name}>Jake Jarvis</span>
-    </a>
-  </Link>
+      </ConstrainImage>
+      <Name>Jake Jarvis</Name>
+    </Link>
+  </NextLink>
 );
 
 export default memo(Selfie);