48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
 
|
"use client";
|
||
|
|
|
||
|
|
import Link from "next/link";
|
||
|
|
import { usePathname } from "next/navigation";
|
||
|
|
import { LayoutGrid, Trophy, TreePine } from "lucide-react";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
const items = [
|
||
|
|
{ href: "/cap", label: "مسیر", icon: TreePine },
|
||
|
|
{ href: "/unwrap", label: "مرکز", icon: LayoutGrid },
|
||
|
|
{ href: "/leaderboard", label: "لیگ", icon: Trophy },
|
||
|
|
];
|
||
|
|
|
||
|
|
export function BottomNav() {
|
||
|
|
const pathname = usePathname();
|
||
|
|
return (
|
||
|
|
<nav
|
||
|
|
className="fixed inset-x-0 bottom-0 z-40 border-t border-border bg-card/95 backdrop-blur md:hidden"
|
||
|
|
style={{ paddingBottom: "env(safe-area-inset-bottom, 0px)" }}
|
||
|
|
>
|
||
|
|
<div className="flex">
|
||
|
|
{items.map(({ href, label, icon: Icon }) => {
|
||
|
|
const active = pathname === href || pathname.startsWith(href + "/");
|
||
|
|
return (
|
||
|
|
<Link
|
||
|
|
key={href}
|
||
|
|
href={href}
|
||
|
|
className={cn(
|
||
|
|
"flex flex-1 flex-col items-center justify-center gap-0.5 py-2 text-[11px] font-bold transition-colors min-h-[56px] touch-manipulation",
|
||
|
|
active ? "text-primary" : "text-muted-foreground",
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Icon
|
||
|
|
className={cn(
|
||
|
|
"h-5 w-5 transition-transform",
|
||
|
|
active && "scale-110",
|
||
|
|
)}
|
||
|
|
strokeWidth={active ? 2.5 : 2}
|
||
|
|
/>
|
||
|
|
{label}
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
);
|
||
|
|
}
|