81 lines
2.8 KiB
TypeScript
81 lines
2.8 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const bottomNavItems = [
|
|
{
|
|
href: "/",
|
|
label: "Home",
|
|
icon: (active: boolean) => (
|
|
<svg viewBox="0 0 24 24" className={cn("size-6", active ? "fill-brand-primary" : "fill-white/60")}>
|
|
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
href: "/sports",
|
|
label: "Sports",
|
|
icon: (active: boolean) => (
|
|
<svg viewBox="0 0 24 24" className={cn("size-6", active ? "fill-brand-primary" : "fill-white/60")}>
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
href: "/betslip",
|
|
label: "Betslip",
|
|
icon: (active: boolean) => (
|
|
<svg viewBox="0 0 24 24" className={cn("size-6", active ? "fill-brand-primary" : "fill-white/60")}>
|
|
<path d="M20 4H4c-1.11 0-2 .89-2 2v12c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"/>
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
href: "/games",
|
|
label: "Casino",
|
|
icon: (active: boolean) => (
|
|
<svg viewBox="0 0 24 24" className={cn("size-6", active ? "fill-brand-primary" : "fill-white/60")}>
|
|
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14l-5-5 1.41-1.41L12 14.17l7.59-7.59L21 8l-9 9z"/>
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
href: "/support",
|
|
label: "Help",
|
|
icon: (active: boolean) => (
|
|
<svg viewBox="0 0 24 24" className={cn("size-6", active ? "fill-brand-primary" : "fill-white/60")}>
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
|
|
</svg>
|
|
),
|
|
},
|
|
]
|
|
|
|
export function MobileBottomNav() {
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<nav className="fixed bottom-0 left-0 right-0 z-50 flex md:hidden h-14 bg-brand-bg border-t border-white/10">
|
|
{bottomNavItems.map((item) => {
|
|
const isActive = pathname === item.href
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="flex-1 flex flex-col items-center justify-center gap-0.5 transition-colors"
|
|
>
|
|
{item.icon(isActive)}
|
|
<span className={cn(
|
|
"text-[10px] font-semibold",
|
|
isActive ? "text-brand-primary" : "text-white/60"
|
|
)}>
|
|
{item.label}
|
|
</span>
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
)
|
|
}
|