Antoni Nuñez Romeu
59 lines
1.9 KiB
React
59 lines
1.9 KiB
React
import { IconHome, IconSearch, IconScan, IconBell, IconUser } from './icons';
|
|
import './BottomNav.css';
|
|
|
|
function BottomNav({ activeTab, onChange, isLoggedIn, badgeCount }) {
|
|
const tabs = [
|
|
{ id: 'home', label: 'Inicio', Icon: IconHome },
|
|
{ id: 'search', label: 'Buscar', Icon: IconSearch },
|
|
{ id: 'scan', label: 'Escanear', Icon: IconScan, elevated: true },
|
|
{ id: 'alerts', label: 'Avisos', Icon: IconBell, badge: badgeCount > 0, badgeCount },
|
|
{ id: 'profile', label: 'Usuario', Icon: IconUser },
|
|
];
|
|
|
|
return (
|
|
<nav className="bottom-nav" aria-label="Navegación principal">
|
|
{tabs.map(({ id, label, Icon, elevated, badge, badgeCount: count, requiresAuth }) => {
|
|
const disabled = requiresAuth && !isLoggedIn;
|
|
const isActive = activeTab === id;
|
|
return (
|
|
<button
|
|
key={id}
|
|
type="button"
|
|
className={[
|
|
'bottom-nav-item',
|
|
isActive ? 'active' : '',
|
|
disabled ? 'disabled' : '',
|
|
elevated ? 'nav-elevated' : '',
|
|
].filter(Boolean).join(' ')}
|
|
onClick={() => {
|
|
if (!disabled) onChange(id);
|
|
}}
|
|
disabled={disabled}
|
|
aria-current={isActive ? 'page' : undefined}
|
|
aria-label={label}
|
|
>
|
|
{elevated ? (
|
|
<div className="nav-fab">
|
|
<Icon size={28} />
|
|
</div>
|
|
) : (
|
|
<span className="nav-icon-wrap">
|
|
<Icon size={26} />
|
|
{badge && (
|
|
<span className="nav-badge">{count}</span>
|
|
)}
|
|
</span>
|
|
)}
|
|
<span className={`nav-label${isActive && !elevated ? ' nav-label--active' : ''}`}>
|
|
{label}
|
|
</span>
|
|
{isActive && !elevated && <span className="nav-indicator" />}
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
export default BottomNav;
|