53 lines
2.2 KiB
TypeScript
53 lines
2.2 KiB
TypeScript
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>
|
|
);
|
|
}
|