80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
const navItems = [
|
|
{ label: "Home", href: "/" },
|
|
{ label: "Flash Vault", href: "/flash-vault" },
|
|
{ label: "Scrapbook", href: "/scrapbook" },
|
|
{ label: "Music", href: "/music" },
|
|
{ label: "Pantry", href: "/pantry" },
|
|
{ label: "Cats", href: "/cats" },
|
|
{ label: "Contact", href: "/contact" },
|
|
];
|
|
|
|
type StudioNavProps = {
|
|
className?: string;
|
|
variant?: "light" | "dark";
|
|
};
|
|
|
|
const themes = {
|
|
dark: {
|
|
container: "rounded-[40px] border border-parchment/30 bg-gradient-to-r from-[#5f2210] via-[#8c3a1d] to-[#5f2210] px-6 py-6 shadow-[0_12px_35px_rgba(30,10,5,0.45)]",
|
|
label: "text-parchment/70",
|
|
title: "text-parchment",
|
|
list: "text-parchment",
|
|
active: "border-parchment bg-parchment text-terracotta shadow-[0_10px_30px_rgba(253,248,241,0.35)]",
|
|
inactive: "border-parchment/50 text-parchment/80 hover:border-parchment hover:text-parchment",
|
|
underline: "bg-parchment/30",
|
|
},
|
|
light: {
|
|
container: "rounded-[32px] border border-brass/40 bg-parchment/80 px-6 py-6",
|
|
label: "text-brass",
|
|
title: "text-coffee",
|
|
list: "text-coffee",
|
|
active: "border-terracotta bg-terracotta text-stucco shadow-[0_8px_30px_rgba(196,106,74,0.35)]",
|
|
inactive: "border-brass/60 text-coffee hover:border-terracotta hover:text-terracotta",
|
|
underline: "bg-terracotta/30",
|
|
},
|
|
};
|
|
|
|
export function StudioNav({ className = "", variant = "light" }: StudioNavProps) {
|
|
const pathname = usePathname();
|
|
const theme = themes[variant];
|
|
|
|
const wrapperClasses = ["flex flex-col gap-4", theme.container, className].filter(Boolean).join(" ");
|
|
|
|
return (
|
|
<nav className={wrapperClasses}>
|
|
<div>
|
|
<p className={`text-sm uppercase tracking-[0.25em] ${theme.label}`}>GrimmTattoo</p>
|
|
<p className={`font-display text-3xl ${theme.title}`}>Spanish Revival Studio</p>
|
|
</div>
|
|
<div>
|
|
<ul className={`flex flex-wrap gap-3 text-sm font-ui uppercase tracking-wide ${theme.list}`}>
|
|
{navItems.map((item) => {
|
|
const isActive = pathname === item.href || (pathname?.startsWith(item.href) && item.href !== "/");
|
|
const activeClasses = theme.active;
|
|
const inactiveClasses = theme.inactive;
|
|
return (
|
|
<li key={item.label}>
|
|
<Link
|
|
href={item.href}
|
|
className={`inline-flex items-center rounded-full border px-4 py-1 text-xs sm:text-sm transition-colors ${
|
|
isActive ? activeClasses : inactiveClasses
|
|
}`}
|
|
aria-current={isActive ? "page" : undefined}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
<div className={`mt-3 h-px w-full rounded-full ${theme.underline}`} />
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|