56 lines
2.3 KiB
JavaScript
56 lines
2.3 KiB
JavaScript
import React from "react";
|
|
import { Home, Coffee, Plus, Bookmark, User } from "lucide-react";
|
|
|
|
export default function BottomNav({ view, setView, setSelectedBean, onCreatePress }) {
|
|
const items = [
|
|
{ id: "dashboard", label: "Home", Icon: Home },
|
|
{ id: "beans", label: "Recipes", Icon: Coffee },
|
|
{ id: "create", label: "Create", Icon: Plus, isAction: true },
|
|
{ id: "brews", label: "Logs", Icon: Bookmark },
|
|
{ id: "profile", label: "Profile", Icon: User },
|
|
];
|
|
|
|
return (
|
|
<div className="fixed bottom-5 left-1/2 -translate-x-1/2 w-[calc(100%-32px)] max-w-[448px] z-[60]">
|
|
<div className="bg-[#2C1810] border border-[#2C1810] rounded-full shadow-[0_12px_32px_rgba(44,24,16,0.25),0_4px_12px_rgba(44,24,16,0.15)] flex items-center px-3 py-2">
|
|
{items.map(item => {
|
|
const isActive = view === item.id;
|
|
const { Icon } = item;
|
|
|
|
if (item.isAction) {
|
|
return (
|
|
<button
|
|
key={item.id}
|
|
onClick={onCreatePress}
|
|
className="flex-1 flex flex-col items-center justify-center mx-1 cursor-pointer"
|
|
aria-label="Create new item"
|
|
>
|
|
<div className="w-11 h-11 rounded-full bg-[#FAF6F1] flex items-center justify-center text-[#2C1810] shadow-[0_4px_12px_rgba(0,0,0,0.2)] transition-transform active:scale-90 hover:scale-105">
|
|
<Icon size={20} strokeWidth={2.5} />
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => { setView(item.id); setSelectedBean(null); }}
|
|
className={`flex-1 flex flex-col items-center gap-1 py-1.5 rounded-full cursor-pointer border-none transition-all ${isActive ? "bg-white/10" : "bg-transparent"}`}
|
|
>
|
|
<Icon
|
|
size={20}
|
|
strokeWidth={2}
|
|
className={`transition-all ${isActive ? "text-white scale-105" : "text-white/60"}`}
|
|
/>
|
|
<span className={`text-[10px] font-semibold tracking-wide transition-colors ${isActive ? "text-white" : "text-white/60"}`}>
|
|
{item.label}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|