Apply linen design system across app

2026-05-20 22:47:52 +02:00
parent 99ff978116
commit 1c5d2f10ac
56 changed files with 4698 additions and 2159 deletions
@@ -0,0 +1,41 @@
+import Link from "next/link";
+import type { ComponentType } from "react";
+import type { LucideProps } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+type NavItemProps = {
+  href: string;
+  label: string;
+  icon: ComponentType<LucideProps>;
+  active?: boolean;
+  badge?: number | string;
+};
+
+export function NavItem({
+  href,
+  label,
+  icon: Icon,
+  active = false,
+  badge,
+}: NavItemProps) {
+  return (
+    <Link
+      href={href}
+      className={cn(
+        "relative flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-[13.5px] font-medium text-[var(--ink-soft)] transition focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--focus-ring)]",
+        "hover:bg-[var(--surface-2)] hover:text-[var(--ink)]",
+        active &&
+          "bg-[var(--accent-soft)] font-semibold text-[var(--accent-deep)] before:absolute before:left-[-14px] before:top-1.5 before:h-[calc(100%-12px)] before:w-[3px] before:rounded-full before:bg-[var(--accent)]",
+      )}
+    >
+      <Icon className="h-4 w-4 shrink-0 [stroke-width:1.7]" />
+      <span className="min-w-0 flex-1 truncate">{label}</span>
+      {badge ? (
+        <span className="rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-2 py-0.5 text-[11px] font-semibold text-[var(--ink-muted)]">
+          {badge}
+        </span>
+      ) : null}
+    </Link>
+  );
+}