Rolf
46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { Flag, Clock, User, ShieldCheck } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const navItems = [
|
|
{ href: '/dashboard', label: 'Rounds', icon: Flag },
|
|
{ href: '/history', label: 'History', icon: Clock },
|
|
{ href: '/profile', label: 'Profile', icon: User },
|
|
]
|
|
|
|
export function BottomNav({ isAdmin = false }: { isAdmin?: boolean }) {
|
|
const pathname = usePathname()
|
|
|
|
const items = isAdmin
|
|
? [...navItems, { href: '/admin', label: 'Admin', icon: ShieldCheck }]
|
|
: navItems
|
|
|
|
return (
|
|
<nav className="fixed bottom-0 left-0 right-0 z-50 border-t bg-background">
|
|
<div className="flex h-16">
|
|
{items.map(({ href, label, icon: Icon }) => {
|
|
const active = pathname.startsWith(href)
|
|
return (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className={cn(
|
|
'flex flex-1 flex-col items-center justify-center gap-1 text-xs transition-colors',
|
|
active
|
|
? 'text-primary'
|
|
: 'text-muted-foreground hover:text-foreground',
|
|
)}
|
|
>
|
|
<Icon className="h-5 w-5" />
|
|
{label}
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|