43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import { NavLink, Outlet } from 'react-router-dom';
|
|
|
|
const TABS = [
|
|
{ to: '/', end: true, icon: 'home', label: '首页', fillActive: false },
|
|
{ to: '/stores', icon: 'storefront', label: '门店', fillActive: true },
|
|
{ to: '/benefit', icon: 'card_giftcard', label: '好客权益', fillActive: false },
|
|
{ to: '/mine', icon: 'person', label: '我的', fillActive: true },
|
|
] as const;
|
|
|
|
export default function TabLayout() {
|
|
return (
|
|
<>
|
|
<Outlet />
|
|
<nav className="app-tabbar">
|
|
{TABS.map((tab) => (
|
|
<NavLink
|
|
key={tab.to}
|
|
to={tab.to}
|
|
end={tab.end}
|
|
className={({ isActive }) => `app-tabbar-item${isActive ? ' active' : ''}`}
|
|
>
|
|
{({ isActive }) => (
|
|
<>
|
|
<span
|
|
className="material-symbols-outlined app-tabbar-icon"
|
|
style={
|
|
isActive && tab.fillActive
|
|
? { fontVariationSettings: "'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24" }
|
|
: undefined
|
|
}
|
|
>
|
|
{tab.icon}
|
|
</span>
|
|
<span className="app-tabbar-label">{tab.label}</span>
|
|
</>
|
|
)}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
</>
|
|
);
|
|
}
|