Spaces:
Sleeping
Sleeping
File size: 2,374 Bytes
c6253b2 391340f c6253b2 391340f c6253b2 391340f 709db16 c6253b2 709db16 391340f 709db16 391340f 709db16 c6253b2 709db16 391340f | 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 | /** Bottom nav: Home | Plan | gold FAB Log | Daily | Settings.
History stays reachable from Home (“See all”). Log FAB remains one tap.
*/
import { CalendarClock, CalendarDays, House, Plus, Settings } from "lucide-preact";
import { Pressable } from "./Pressable";
import { navigate, type Route } from "../router";
type TabName = "home" | "plan" | "daily" | "settings";
const TABS: {
name: TabName;
label: string;
path: string;
Icon: typeof House;
}[] = [
{ name: "home", label: "Home", path: "/", Icon: House },
{ name: "plan", label: "Plan", path: "/plan", Icon: CalendarClock },
{ name: "daily", label: "Daily", path: "/daily", Icon: CalendarDays },
{ name: "settings", label: "Settings", path: "/settings", Icon: Settings },
];
export function TabBar({ route }: { route: Route }) {
const left = TABS.slice(0, 2);
const right = TABS.slice(2);
return (
<nav class="tab-bar" aria-label="Main">
<div class="tab-bar-inner">
{left.map((tab) => {
const active = route.name === tab.name;
const Icon = tab.Icon;
return (
<Pressable
key={tab.name}
className={`tab-item ${active ? "active" : ""}`.trim()}
ariaLabel={tab.label}
onClick={() => navigate(tab.path)}
>
<Icon size={22} strokeWidth={active ? 2.4 : 2} aria-hidden="true" />
<span aria-current={active ? "page" : undefined}>{tab.label}</span>
</Pressable>
);
})}
<div class="tab-fab-slot" aria-hidden="true" />
{right.map((tab) => {
const active = route.name === tab.name;
const Icon = tab.Icon;
return (
<Pressable
key={tab.name}
className={`tab-item ${active ? "active" : ""}`.trim()}
ariaLabel={tab.label}
onClick={() => navigate(tab.path)}
>
<Icon size={22} strokeWidth={active ? 2.4 : 2} aria-hidden="true" />
<span aria-current={active ? "page" : undefined}>{tab.label}</span>
</Pressable>
);
})}
</div>
<Pressable className="tab-fab" ariaLabel="Log" onClick={() => navigate("/log")}>
<Plus size={28} strokeWidth={2.5} color="#202020" aria-hidden="true" />
</Pressable>
</nav>
);
}
|