Initial commit: monorepo Naturcalabacera reservas (apps/api + apps/web + packages/shared)

src/components/MobileNavigation.tsx

@@ -0,0 +1,52 @@
+import { Calendar, Settings, CalendarDays } from 'lucide-react';
+
+interface Props {
+    currentView: string;
+    onNavigate: (view: string) => void;
+}
+
+export function MobileNavigation({ currentView, onNavigate }: Props) {
+    const menuItems = [
+        { id: 'calendar', label: 'Mensual', icon: Calendar },
+        { id: 'yearly', label: 'Anual', icon: CalendarDays },
+        { id: 'settings', label: 'Ajustes', icon: Settings },
+    ];
+
+    return (
+        <div className="md:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-emerald-950/90 backdrop-blur-xl border-t border-stone-200 dark:border-emerald-900/30 z-50 pb-safe">
+            <div className="flex justify-around items-center p-2">
+                {menuItems.map((item) => {
+                    const Icon = item.icon;
+                    const isActive = currentView === item.id;
+
+                    return (
+                        <button
+                            key={item.id}
+                            onClick={() => onNavigate(item.id)}
+                            className={`
+                flex flex-col items-center justify-center p-2 rounded-xl transition-all duration-300
+                ${isActive
+                                    ? 'text-emerald-600 dark:text-emerald-400'
+                                    : 'text-stone-400 dark:text-emerald-600/40 hover:text-stone-600 dark:hover:text-emerald-400/80'
+                                }
+              `}
+                        >
+                            <div className={`
+                p-2 rounded-xl mb-1 transition-all duration-300
+                ${isActive
+                                    ? 'bg-emerald-100 dark:bg-emerald-900/40'
+                                    : 'bg-transparent'
+                                }
+              `}>
+                                <Icon className={`w-6 h-6 ${isActive ? 'scale-110' : ''}`} />
+                            </div>
+                            <span className={`text-[10px] font-bold ${isActive ? 'opacity-100' : 'opacity-70'}`}>
+                                {item.label}
+                            </span>
+                        </button>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}