63 lines
2.5 KiB
TypeScript
63 lines
2.5 KiB
TypeScript
'use client'
|
|
import Link from 'next/link'
|
|
import { usePathname, useRouter } from 'next/navigation'
|
|
import { useState } from 'react'
|
|
|
|
const WC_TROPHY = (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img src="/favicon.svg" style={{ height: '36px', width: 'auto' }} alt="" />
|
|
)
|
|
|
|
const NAV_LINKS = [
|
|
{ href: '/', label: 'Home' },
|
|
{ href: '/groups', label: 'Groups' },
|
|
{ href: '/stats', label: 'Statistics' },
|
|
{ href: '/history', label: 'History' },
|
|
]
|
|
|
|
export function Nav() {
|
|
const pathname = usePathname()
|
|
const router = useRouter()
|
|
const [q, setQ] = useState('')
|
|
|
|
const handleSearch = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (q.trim()) router.push(`/search?q=${encodeURIComponent(q.trim())}`)
|
|
}
|
|
|
|
return (
|
|
<nav className="fixed top-0 left-0 right-0 z-50 h-[60px] flex items-center px-5 gap-0"
|
|
style={{ background: 'rgba(4,13,8,0.97)', backdropFilter: 'blur(18px)', borderBottom: '1px solid rgba(34,197,94,0.18)' }}>
|
|
<Link href="/" className="flex items-center gap-2.5 mr-5 flex-shrink-0 cursor-pointer select-none">
|
|
{WC_TROPHY}
|
|
<span className="font-['Bebas_Neue'] text-lg tracking-[3px] text-[#22c55e] whitespace-nowrap">WORLD CUP</span>
|
|
</Link>
|
|
|
|
<div className="flex gap-0.5 flex-1 min-w-0">
|
|
{NAV_LINKS.map(({ href, label }) => {
|
|
const active = href === '/' ? pathname === '/' : pathname.startsWith(href)
|
|
return (
|
|
<Link key={href} href={href}
|
|
className={`px-3.5 py-1.5 rounded-lg text-[13px] font-medium whitespace-nowrap flex-shrink-0 transition-colors
|
|
${active ? 'bg-[rgba(34,197,94,0.12)] text-[#22c55e]' : 'text-[#4a7a55] hover:text-[#6abf7a]'}`}>
|
|
{label}
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
<form onSubmit={handleSearch} className="relative flex-shrink-0 ml-2">
|
|
<input
|
|
type="text" value={q} onChange={e => setQ(e.target.value)}
|
|
placeholder="Search…"
|
|
className="w-44 pl-8 pr-3.5 py-1.5 rounded-[20px] text-[13px] text-[#dff5e8] outline-none"
|
|
style={{ background: 'rgba(34,197,94,0.06)', border: '1px solid rgba(34,197,94,0.18)' }}
|
|
/>
|
|
<svg className="absolute left-2.5 top-1/2 -translate-y-1/2 opacity-30 pointer-events-none" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#dff5e8" strokeWidth="2.5">
|
|
<circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
|
|
</svg>
|
|
</form>
|
|
</nav>
|
|
)
|
|
}
|