Hermes Agent
32 lines
878 B
TypeScript
32 lines
878 B
TypeScript
import type { ScreenId } from '../../app/navigation.js';
|
|
import { navItems } from '../../app/navigation.js';
|
|
|
|
type BottomNavProps = {
|
|
activeScreen: ScreenId;
|
|
onNavigate: (screen: ScreenId) => void;
|
|
};
|
|
|
|
export function BottomNav({ activeScreen, onNavigate }: BottomNavProps) {
|
|
return (
|
|
<nav className="bottom-nav" aria-label="Primary navigation">
|
|
{navItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const active = item.id === activeScreen;
|
|
|
|
return (
|
|
<button
|
|
aria-current={active ? 'page' : undefined}
|
|
className="bottom-nav__item"
|
|
key={item.id}
|
|
onClick={() => onNavigate(item.id)}
|
|
type="button"
|
|
>
|
|
<Icon aria-hidden="true" size={20} strokeWidth={2.4} />
|
|
<span>{item.label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
}
|