refactor: Extract Sidebar Link to component

components/TempDesignSystem/Link/index.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import { linkVariants } from "./variants"
+
+import NextLink from "next/link"
+
+import type { LinkProps } from "./link"
+import { usePathname } from "next/navigation"
+
+export default function Link({
+  className,
+  href,
+  size,
+  variant,
+  ...props
+}: LinkProps) {
+  const currentPageSlug = `/${usePathname()
+    .split("/")
+    .filter((v) => v)
+    .at(-1)}`
+  const isActive = currentPageSlug === href
+  const classNames = linkVariants({
+    active: isActive,
+    className,
+    size,
+    variant,
+  })
+  return <NextLink className={classNames} href={href} {...props} />
+}

components/TempDesignSystem/Link/link.module.css

@@ -0,0 +1,31 @@
+.link {
+  text-decoration: none;
+}
+
+.default {
+  font-family: var(--ff-fira-sans);
+}
+
+.sidebar {
+  align-items: center;
+  color: var(--some-text-color, #111);
+  display: flex;
+  font-size: 1.6rem;
+  font-weight: 400;
+  gap: 0.6rem;
+  line-height: 1.9rem;
+  position: relative;
+}
+
+.activeSidebar {
+  font-weight: 600;
+}
+
+.activeSidebar::before {
+  bottom: -0.4rem;
+  background-color: var(--some-text-color, #000);
+  content: "";
+  height: 0.2rem;
+  position: absolute;
+  width: 100%;
+}

components/TempDesignSystem/Link/link.ts

@@ -0,0 +1,9 @@
+import { linkVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export interface LinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    VariantProps<typeof linkVariants> {
+  href: string
+}

components/TempDesignSystem/Link/variants.ts

@@ -0,0 +1,26 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./link.module.css"
+
+export const linkVariants = cva(styles.link, {
+  variants: {
+    active: {
+      true: styles.active,
+    },
+    size: {},
+    variant: {
+      default: styles.default,
+      sidebar: styles.sidebar,
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+  compoundVariants: [
+    {
+      class: styles.activeSidebar,
+      active: true,
+      variant: "sidebar",
+    },
+  ],
+})