57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { Compass, PlayCircle, Radio, User } from 'lucide-react';
|
|
import { UserTab } from '../types';
|
|
|
|
interface BottomNavProps {
|
|
currentTab: UserTab;
|
|
onTabChange: (tab: UserTab) => void;
|
|
}
|
|
|
|
const BottomNav: React.FC<BottomNavProps> = ({ currentTab, onTabChange }) => {
|
|
const navItems = [
|
|
{ id: UserTab.Discovery, icon: Compass, label: '发现' },
|
|
{ id: UserTab.Library, icon: PlayCircle, label: '剧本' },
|
|
{ id: UserTab.Control, icon: Radio, label: '操控' },
|
|
{ id: UserTab.Profile, icon: User, label: '我的' },
|
|
];
|
|
|
|
return (
|
|
<div className="fixed bottom-0 left-0 w-full z-50">
|
|
{/* Main Bar Content - High Transparency Glass */}
|
|
<div className="bg-black/20 backdrop-blur-2xl border-t border-white/10 pb-safe">
|
|
<div className="flex justify-around items-center h-[60px]">
|
|
{navItems.map((item) => {
|
|
const isActive = currentTab === item.id;
|
|
return (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => onTabChange(item.id)}
|
|
className="relative flex-1 flex flex-col items-center justify-center h-full group"
|
|
>
|
|
{/* Active Glow Background */}
|
|
{isActive && (
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 bg-white/10 rounded-full blur-lg"></div>
|
|
)}
|
|
|
|
{/* Icon */}
|
|
<div className={`transition-all duration-300 relative z-10 ${isActive ? 'text-white scale-110 drop-shadow-[0_0_10px_rgba(255,255,255,0.6)]' : 'text-white/50 group-hover:text-white/80'}`}>
|
|
<item.icon
|
|
size={26}
|
|
strokeWidth={isActive ? 2.5 : 1.5}
|
|
/>
|
|
</div>
|
|
|
|
{/* Label */}
|
|
<span className={`text-[10px] font-medium mt-1 transition-colors duration-300 relative z-10 ${isActive ? 'text-white' : 'text-white/40'}`}>
|
|
{item.label}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BottomNav; |