|
1
|
import { useLocation } from "wouter"; |
|
2
|
import { Home, Heart, Search, HelpCircle, User } from "lucide-react"; |
|
3
|
import { cn } from "@/lib/utils"; |
|
4
|
|
|
5
|
export function BottomNav() { |
|
6
|
const [location, setLocation] = useLocation(); |
|
7
|
|
|
8
|
const navItems = [ |
|
9
|
{ icon: Home, label: "Home", path: "/" }, |
|
10
|
{ icon: Search, label: "Finder", path: "/device-finder" }, |
|
11
|
{ icon: HelpCircle, label: "Support", path: "/troubleshooting" }, |
|
12
|
{ icon: Heart, label: "Saved", path: "/favorites" }, |
|
13
|
{ icon: User, label: "Profile", path: "/offline-settings" }, |
|
14
|
]; |
|
15
|
|
|
16
|
return ( |
|
17
|
<nav className="fixed bottom-0 left-0 right-0 z-50 lg:hidden bg-background/80 backdrop-blur-xl border-t border-border/40 pb-safe"> |
|
18
|
<div className="flex items-center justify-around h-16"> |
|
19
|
{navItems.map((item) => { |
|
20
|
const isActive = location === item.path; |
|
21
|
const Icon = item.icon; |
|
22
|
|
|
23
|
return ( |
|
24
|
<button |
|
25
|
key={item.path} |
|
26
|
onClick={() => setLocation(item.path)} |
|
27
|
className={cn( |
|
28
|
"flex flex-col items-center justify-center gap-1 w-full h-full transition-all duration-300", |
|
29
|
isActive ? "text-primary" : "text-muted-foreground hover:text-foreground" |
|
30
|
)} |
|
31
|
> |
|
32
|
<div className={cn( |
|
33
|
"p-1 rounded-xl transition-all duration-300", |
|
34
|
isActive && "bg-primary/10 scale-110 shadow-glass" |
|
35
|
)}> |
|
36
|
<Icon className="h-5 w-5" /> |
|
37
|
</div> |
|
38
|
<span className="text-[10px] font-bold uppercase tracking-widest">{item.label}</span> |
|
39
|
</button> |
|
40
|
); |
|
41
|
})} |
|
42
|
</div> |
|
43
|
</nav> |
|
44
|
); |
|
45
|
} |