49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import { Sparkles } from "lucide-react"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export function Navigation() {
|
|
const pathname = usePathname()
|
|
|
|
const links = [
|
|
{ href: "/about", label: "About Banksy" },
|
|
{ href: "/gallery", label: "Gallery" },
|
|
]
|
|
|
|
return (
|
|
<nav className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
<div className="container flex h-16 items-center justify-between px-4">
|
|
<Link href="/" className="flex items-center gap-2 font-bold text-xl">
|
|
<Sparkles className="h-6 w-6 text-primary" />
|
|
<div className="flex flex-col leading-tight">
|
|
<span className="rainbow-text">Paint Spark</span>
|
|
<span className="text-xs font-normal text-muted-foreground">by Banksy</span>
|
|
</div>
|
|
</Link>
|
|
|
|
<div className="flex items-center gap-6">
|
|
{links.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className={cn(
|
|
"text-sm font-bold transition-colors hover:text-primary",
|
|
pathname === link.href
|
|
? "text-primary"
|
|
: link.href === "/about"
|
|
? "text-teal-600 dark:text-teal-400"
|
|
: "text-purple-600 dark:text-purple-400",
|
|
)}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|