chore: update components folder structure, add constants, update existing layout components, scaffold pages

2026-05-27 19:52:41 -07:00
parent 6193c57655
commit 50fadddbe3
16 changed files with 228 additions and 237 deletions
@@ -1,24 +1,36 @@
-import Link from "next/link";
+"use client";

+import Link from "next/link";
+import { usePathname } from "next/navigation";

 const navLinks = [
-  { href: "/projects", label: "Projects" },
-  { href: "/about", label: "About" },
-  { href: "/uses", label: "Uses" },
+  { href: "/projects", label: "projects" },
+  { href: "/about", label: "about" },
+  { href: "/uses", label: "uses" },
 ];

 export default function Nav() {
-    return (
-        <nav className="flex gap-6 font-mono text-xs text-neutral-400">
-          {navLinks.map((link) => (
-            <Link
-              key={link.href}
-              href={link.href}
-              className="hover:text-white"
-            >
-              {link.label}
-            </Link>
-          ))}
-        </nav>
-    )
-}
+  const pathname = usePathname();
+
+  return (
+    <nav className="flex gap-6 text-[13px]">
+      {navLinks.map((link) => {
+        const isActive =
+          pathname === link.href || pathname.startsWith(`${link.href}/`);
+        return (
+          <Link
+            key={link.href}
+            href={link.href}
+            className={
+              isActive
+                ? "text-neutral-100"
+                : "text-neutral-500 hover:text-neutral-100"
+            }
+          >
+            {link.label}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}