114 lines
4.1 KiB
TypeScript
114 lines
4.1 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { useState } from 'react'
|
|
import { NavLink } from './NavLink'
|
|
import { UserMenu } from './UserMenu'
|
|
|
|
// Icon components
|
|
const HomeIcon = () => (
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
|
|
</svg>
|
|
)
|
|
|
|
const SearchIcon = () => (
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clipRule="evenodd" />
|
|
</svg>
|
|
)
|
|
|
|
const PlaylistIcon = () => (
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zm11 3a2 2 0 100-4 2 2 0 000 4z" />
|
|
</svg>
|
|
)
|
|
|
|
const UploadIcon = () => (
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM6.293 6.707a1 1 0 010-1.414l3-3a1 1 0 011.414 0l3 3a1 1 0 01-1.414 1.414L11 5.414V13a1 1 0 11-2 0V5.414L7.707 6.707a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
|
</svg>
|
|
)
|
|
|
|
const MenuIcon = () => (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
)
|
|
|
|
const CloseIcon = () => (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
)
|
|
|
|
const navLinks = [
|
|
{ href: '/', label: 'Home', icon: <HomeIcon /> },
|
|
{ href: '/search', label: 'Search', icon: <SearchIcon /> },
|
|
{ href: '/playlists', label: 'Playlists', icon: <PlaylistIcon /> },
|
|
{ href: '/upload', label: 'Upload', icon: <UploadIcon /> },
|
|
]
|
|
|
|
export function Header() {
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
|
|
|
|
return (
|
|
<header className="fixed top-0 left-0 right-0 z-50 bg-zinc-950/95 backdrop-blur-md border-b border-zinc-800">
|
|
<div className="max-w-7xl mx-auto px-4">
|
|
<div className="flex items-center justify-between h-16">
|
|
{/* Logo */}
|
|
<Link href="/" className="flex items-center gap-2">
|
|
<span className="text-2xl font-bold bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">
|
|
SonicCloud
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden md:flex items-center gap-1">
|
|
{navLinks.map((link) => (
|
|
<NavLink key={link.href} href={link.href} icon={link.icon}>
|
|
{link.label}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
|
|
{/* Desktop User Menu */}
|
|
<div className="hidden md:block">
|
|
<UserMenu />
|
|
</div>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
className="md:hidden p-2 text-zinc-400 hover:text-white transition-colors"
|
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
aria-label={isMobileMenuOpen ? 'Close menu' : 'Open menu'}
|
|
>
|
|
{isMobileMenuOpen ? <CloseIcon /> : <MenuIcon />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{isMobileMenuOpen && (
|
|
<div className="md:hidden bg-zinc-950 border-b border-zinc-800">
|
|
<nav className="flex flex-col px-4 py-4 gap-2">
|
|
{navLinks.map((link) => (
|
|
<NavLink
|
|
key={link.href}
|
|
href={link.href}
|
|
icon={link.icon}
|
|
className="w-full"
|
|
>
|
|
{link.label}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
<div className="px-4 py-4 border-t border-zinc-800">
|
|
<UserMenu />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</header>
|
|
)
|
|
}
|