`src/components/shared/Navbar.tsx`

87 lines
'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { motion } from 'framer-motion'
import { Camera, Search, LayoutDashboard, LogIn } from 'lucide-react'
import clsx from 'clsx'

const NAV_LINKS = [
  { href: '/browse', label: 'Browse', icon: Search },
  { href: '/licensor', label: 'Upload', icon: Camera },
  { href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
]

export default function Navbar() {
  const pathname = usePathname()

  return (
    <nav
      className="sticky top-0 z-50 flex items-center justify-between px-6 py-4 md:px-12 border-b"
      style={{
        background: 'rgba(255, 241, 230, 0.92)',
        borderColor: 'var(--color-cream-dark)',
        backdropFilter: 'blur(12px)',
        WebkitBackdropFilter: 'blur(12px)',
      }}
    >
      <Link
        href="/"
        className="text-xl font-black tracking-tighter transition-opacity hover:opacity-70"
        style={{ color: 'var(--color-brown)' }}
      >
        i was cute
      </Link>

      <div className="flex items-center gap-1">
        {NAV_LINKS.map(({ href, label, icon: Icon }) => {
          const active = pathname.startsWith(href)
          return (
            <Link
              key={href}
              href={href}
              className={clsx(
                'relative flex items-center gap-1.5 px-4 py-2 rounded-2xl text-sm font-medium',
                'transition-all duration-200 hover:scale-105'
              )}
              style={{
                color: active ? 'var(--color-brown)' : 'var(--color-warm-gray)',
              }}
            >
              {active && (
                <motion.div
                  layoutId="nav-active"
                  className="absolute inset-0 rounded-2xl"
                  style={{ background: 'var(--color-cream-dark)' }}
                  transition={{ type: 'spring', stiffness: 380, damping: 30 }}
                />
              )}
              <span className="relative z-10 flex items-center gap-1.5">
                <Icon size={14} />
                <span className="hidden sm:inline">{label}</span>
              </span>
            </Link>
          )
        })}

        <div
          className="w-px h-6 mx-2"
          style={{ background: 'var(--color-cream-dark)' }}
        />

        <Link
          href="/login"
          className="flex items-center gap-1.5 px-4 py-2 rounded-2xl text-sm font-semibold transition-all hover:scale-105"
          style={{
            background: 'var(--color-peach)',
            color: 'var(--color-brown)',
          }}
        >
          <LogIn size={14} />
          <span className="hidden sm:inline">Sign In</span>
        </Link>
      </div>
    </nav>
  )
}