initial

books/components/BottomNav.tsx

@@ -0,0 +1,41 @@
+
+import React from 'react';
+import { AppScreen } from '../types';
+
+interface BottomNavProps {
+  currentScreen: AppScreen;
+  setScreen: (screen: AppScreen) => void;
+}
+
+export const BottomNav: React.FC<BottomNavProps> = ({ currentScreen, setScreen }) => {
+  const navItems = [
+    { id: AppScreen.LIBRARY, label: 'Полка', icon: 'library_books' },
+    { id: AppScreen.CATEGORIES, label: 'Категории', icon: 'category' },
+    { id: AppScreen.WISHLIST, label: 'Вишлист', icon: 'bookmark' },
+    { id: AppScreen.SETTINGS, label: 'Настройки', icon: 'settings' },
+  ];
+
+  return (
+    <nav className="fixed bottom-0 z-50 w-full max-w-md glass-nav pb-safe">
+      <div className="flex items-center justify-around h-16 px-2">
+        {navItems.map((item) => (
+          <button
+            key={item.id}
+            onClick={() => setScreen(item.id)}
+            className={`flex flex-col items-center justify-center w-full h-full gap-1 transition-colors ${
+              currentScreen === item.id || (item.id === AppScreen.CATEGORIES && currentScreen === AppScreen.CATEGORIES)
+                ? 'text-primary'
+                : 'text-slate-400 dark:text-slate-500 hover:text-slate-600 dark:hover:text-slate-300'
+            }`}
+          >
+            <span className={`material-symbols-outlined text-[24px] ${currentScreen === item.id ? 'fill-current' : ''}`}>
+              {item.icon}
+            </span>
+            <span className="text-[10px] font-medium">{item.label}</span>
+          </button>
+        ))}
+      </div>
+      <div className="h-5 w-full"></div>
+    </nav>
+  );
+};