Spaces:
Sleeping
Sleeping
File size: 2,535 Bytes
4be2b2b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
import { Link, useLocation } from "react-router-dom";
import { Home, Package, FileText, Users, MoreHorizontal, Receipt, BarChart3, BookOpen } from "lucide-react";
import { cn } from "@/lib/utils";
import { useLanguage } from '@/contexts/LanguageContext';
interface NavItem {
icon: React.ElementType;
label: string;
to: string;
badge?: number;
}
export function BottomNavigation() {
const { pathname } = useLocation();
const { t } = useLanguage();
const navItems: NavItem[] = [
{ icon: Home, label: t('nav.home'), to: "/", badge: undefined },
{ icon: Package, label: t('nav.purchase'), to: "/purchase", badge: undefined },
{ icon: FileText, label: t('nav.invoice'), to: "/invoice", badge: undefined },
{ icon: BarChart3, label: t('nav.stock'), to: "/stock", badge: undefined },
{ icon: BookOpen, label: t('nav.ledger'), to: "/ledger", badge: undefined },
];
return (
<nav className="
fixed bottom-0 left-0 right-0 z-40
h-16 bg-card border-t
flex items-center justify-around
md:hidden
safe-area-inset-bottom
shadow-lg
">
{navItems.map((item) => {
const isActive = pathname === item.to;
const Icon = item.icon;
return (
<Link
key={item.to}
to={item.to}
className={cn(
"flex flex-col items-center justify-center",
"relative flex-1 h-full",
"active:bg-muted/50 transition-colors",
"touch-manipulation select-none",
isActive && "text-primary"
)}
>
<Icon className={cn(
"h-5 w-5 transition-transform",
isActive && "scale-110"
)} />
<span className={cn(
"text-xs mt-1 font-medium",
isActive && "font-semibold"
)}>
{item.label}
</span>
{item.badge && item.badge > 0 && (
<span className="
absolute top-2 right-1/4
flex items-center justify-center
h-5 w-5 rounded-full
bg-destructive text-destructive-foreground
text-xs font-bold
">
{item.badge > 9 ? '9+' : item.badge}
</span>
)}
{isActive && (
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-12 h-1 bg-primary rounded-b-full" />
)}
</Link>
);
})}
</nav>
);
}
|