51 lines
No EOL
1.8 KiB
TypeScript
51 lines
No EOL
1.8 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { Palette, Upload, TrendingUp, Settings, ShoppingBag } from 'lucide-react'
|
|
|
|
const tabs = [
|
|
{ href: '/', label: 'Create', icon: Palette },
|
|
{ href: '/upload', label: 'Upload', icon: Upload },
|
|
{ href: '/trending', label: 'Trending', icon: TrendingUp },
|
|
{ href: '/shop', label: 'Shop', icon: ShoppingBag },
|
|
{ href: '/settings', label: 'Settings', icon: Settings },
|
|
]
|
|
|
|
export default function Header() {
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<header className="fixed top-0 left-0 right-0 z-50 bg-surface/95 backdrop-blur-sm border-b border-slate-700">
|
|
<div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
|
|
<span className="text-white font-bold text-sm">AI</span>
|
|
</div>
|
|
<h1 className="text-xl font-bold text-white">Video Flow</h1>
|
|
</div>
|
|
|
|
<nav className="flex items-center gap-1">
|
|
{tabs.map((tab) => {
|
|
const Icon = tab.icon
|
|
const isActive = pathname === tab.href
|
|
return (
|
|
<Link
|
|
key={tab.href}
|
|
href={tab.href}
|
|
className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors ${
|
|
isActive
|
|
? 'bg-primary text-white'
|
|
: 'text-slate-400 hover:text-white hover:bg-slate-700'
|
|
}`}
|
|
>
|
|
<Icon size={18} />
|
|
<span className="text-sm font-medium">{tab.label}</span>
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
)
|
|
} |