42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
|
|
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>
|
|
);
|
|
};
|