refactor: everything

src/components/BottomNav.jsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+export default function BottomNav({ view, setView, setSelectedBean, onCreatePress }) {
+  const items = [
+    { id: "dashboard", label: "Home", icon: "🏠" },
+    { id: "beans", label: "Recipes", icon: "🫘" },
+    { id: "create", label: "Create", icon: "＋", isAction: true },
+    { id: "brews", label: "Logs", icon: "📋" },
+    { id: "profile", label: "Profile", icon: "👤" },
+  ];
+
+  return (
+    <div className="fixed bottom-4 left-1/2 -translate-x-1/2 w-[calc(100%-32px)] max-w-[448px] z-[60]">
+      <div className="bg-white/90 backdrop-blur-md border border-[#E8DFD3] rounded-[28px] shadow-[0_8px_32px_rgba(44,24,16,0.12),0_2px_8px_rgba(44,24,16,0.08)] flex items-center px-2 py-2">
+        {items.map(item => {
+          const isActive = view === item.id;
+          if (item.isAction) {
+            return (
+              <button
+                key={item.id}
+                onClick={onCreatePress}
+                className="flex-1 flex flex-col items-center justify-center mx-1">
+                <div className="w-12 h-12 rounded-full bg-[#2C1810] flex items-center justify-center text-[#FAF6F1] text-2xl font-light shadow-[0_4px_12px_rgba(44,24,16,0.25)] transition-transform active:scale-90 hover:scale-105">
+                  ＋
+                </div>
+              </button>
+            );
+          }
+          return (
+            <button
+              key={item.id}
+              onClick={() => { setView(item.id); setSelectedBean(null); }}
+              className={`flex-1 flex flex-col items-center gap-0.5 py-1.5 rounded-[20px] cursor-pointer border-none transition-all ${isActive ? "bg-[#FAF6F1]" : "bg-transparent"}`}>
+              <span className={`text-xl transition-transform ${isActive ? "scale-110" : "scale-100 opacity-50"}`}>{item.icon}</span>
+              <span className={`text-[10px] font-semibold tracking-wide transition-colors ${isActive ? "text-[#2C1810]" : "text-[#9C8B7A]"}`}>{item.label}</span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}