58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { Home, Cpu, Settings } from "lucide-react";
|
|
|
|
interface Props {
|
|
active: string;
|
|
onChange: (tab: string) => void;
|
|
}
|
|
|
|
const TABS = [
|
|
{ id: "home", label: "Главная", icon: Home, color: "#6366f1" },
|
|
{ id: "devices", label: "Устройства", icon: Cpu, color: "#3b82f6" },
|
|
{ id: "settings", label: "Настройки", icon: Settings, color: "#10b981" },
|
|
];
|
|
|
|
export default function BottomNav({ active, onChange }: Props) {
|
|
return (
|
|
<motion.div
|
|
className="glass-card px-3 py-2 flex items-center justify-around no-select flex-shrink-0"
|
|
style={{ borderRadius: "20px" }}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
{TABS.map((tab) => {
|
|
const Icon = tab.icon;
|
|
const isActive = active === tab.id;
|
|
return (
|
|
<motion.button
|
|
key={tab.id}
|
|
onClick={() => onChange(tab.id)}
|
|
className="flex flex-col items-center gap-1.5 px-10 py-2 rounded-2xl relative"
|
|
whileTap={{ scale: 0.85 }}
|
|
>
|
|
{isActive && (
|
|
<motion.div
|
|
className="absolute inset-0 rounded-2xl"
|
|
style={{
|
|
background: `${tab.color}15`,
|
|
border: `1px solid ${tab.color}30`,
|
|
boxShadow: `0 0 16px ${tab.color}20`,
|
|
}}
|
|
layoutId="navActive"
|
|
transition={{ type: "spring", stiffness: 450, damping: 30 }}
|
|
/>
|
|
)}
|
|
<Icon size={22} color={isActive ? tab.color : "var(--text-secondary)"} strokeWidth={isActive ? 2 : 1.5} />
|
|
<span className="text-xs font-semibold" style={{ color: isActive ? tab.color : "var(--text-secondary)" }}>
|
|
{tab.label}
|
|
</span>
|
|
</motion.button>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
);
|
|
}
|