46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import { useNavigate } from 'react-router-dom'
|
|
|
|
const tabs = [
|
|
{ label: '总览', icon: '📊', path: '/dashboard' },
|
|
{ label: 'Gateway', icon: '📡', path: '/gateway' },
|
|
{ label: 'Kanban', icon: '📋', path: '/kanban' },
|
|
{ label: 'Cron', icon: '⏰', path: '/cron' },
|
|
]
|
|
|
|
export interface TabBarProps {
|
|
activePath: string
|
|
}
|
|
|
|
export default function TabBar({ activePath }: TabBarProps) {
|
|
const navigate = useNavigate()
|
|
|
|
return (
|
|
<div
|
|
className="fixed bottom-0 left-0 right-0 flex items-center z-50"
|
|
style={{
|
|
height: 56,
|
|
background: 'var(--bg-nav)',
|
|
borderTop: '1px solid var(--border)',
|
|
}}
|
|
>
|
|
{tabs.map(tab => {
|
|
const isActive = activePath === tab.path
|
|
return (
|
|
<button
|
|
key={tab.path}
|
|
onClick={() => navigate(tab.path)}
|
|
className="flex-1 flex flex-col items-center justify-center gap-[2px] cursor-pointer bg-transparent border-none transition-colors duration-100"
|
|
style={{
|
|
color: isActive ? 'var(--honey)' : 'var(--text-dim)',
|
|
fontWeight: isActive ? 600 : 400,
|
|
}}
|
|
>
|
|
<span style={{ fontSize: 20 }}>{tab.icon}</span>
|
|
<span style={{ fontSize: 11 }}>{tab.label}</span>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|