100 lines
4.8 KiB
TypeScript
100 lines
4.8 KiB
TypeScript
import React from 'react';
|
|
import { Sparkles, LayoutGrid, Clock, Settings, Zap } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import { motion } from 'framer-motion';
|
|
|
|
interface BottomNavProps {
|
|
currentTab?: 'create' | 'library' | 'uploads' | 'settings';
|
|
onTabChange?: (tab: 'create' | 'library' | 'uploads' | 'settings') => void;
|
|
}
|
|
|
|
export function BottomNav({ currentTab = 'create', onTabChange }: BottomNavProps) {
|
|
return (
|
|
<nav className="fixed bottom-0 left-0 right-0 glass-panel border-t border-border px-8 py-3 pb-8 z-[100] shadow-premium">
|
|
<div className="flex justify-between items-center max-w-lg mx-auto">
|
|
|
|
{/* Create Tab (Highlighted) */}
|
|
<button
|
|
onClick={() => onTabChange?.('create')}
|
|
className="flex flex-col items-center space-y-1 relative group"
|
|
>
|
|
<div className="relative">
|
|
<div className={cn(
|
|
"w-12 h-10 rounded-2xl flex items-center justify-center transition-all duration-300",
|
|
currentTab === 'create'
|
|
? "bg-primary shadow-lg shadow-primary/30"
|
|
: "bg-muted/50 hover:bg-muted"
|
|
)}>
|
|
<Sparkles className={cn(
|
|
"h-5 w-5 transition-colors",
|
|
currentTab === 'create' ? "text-white" : "text-muted-foreground"
|
|
)} />
|
|
{currentTab === 'create' && (
|
|
<motion.div
|
|
layoutId="nav-glow"
|
|
className="absolute inset-0 bg-primary/20 blur-lg -z-10 rounded-full"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<span className={cn(
|
|
"text-[10px] font-bold tracking-tight transition-colors",
|
|
currentTab === 'create' ? "text-primary" : "text-muted-foreground"
|
|
)}>Create</span>
|
|
</button>
|
|
|
|
{/* Prompt Library */}
|
|
<button
|
|
onClick={() => onTabChange?.('library')}
|
|
className={cn(
|
|
"flex flex-col items-center space-y-1 transition-all group",
|
|
currentTab === 'library' ? "text-primary" : "text-muted-foreground"
|
|
)}
|
|
>
|
|
<div className={cn(
|
|
"p-2 rounded-xl transition-all",
|
|
currentTab === 'library' ? "bg-primary/10" : "group-hover:bg-muted/50"
|
|
)}>
|
|
<LayoutGrid className={cn("h-6 w-6", currentTab === 'library' ? "text-primary" : "")} />
|
|
</div>
|
|
<span className={cn("text-[10px] font-semibold", currentTab === 'library' ? "text-primary" : "")}>Library</span>
|
|
</button>
|
|
|
|
{/* Uploads */}
|
|
<button
|
|
onClick={() => onTabChange?.('uploads')}
|
|
className={cn(
|
|
"flex flex-col items-center space-y-1 transition-all group",
|
|
currentTab === 'uploads' ? "text-primaryScale-500" : "text-muted-foreground"
|
|
)}
|
|
>
|
|
<div className={cn(
|
|
"p-2 rounded-xl transition-all",
|
|
currentTab === 'uploads' ? "bg-primary/10" : "group-hover:bg-muted/50"
|
|
)}>
|
|
<Clock className={cn("h-6 w-6", currentTab === 'uploads' ? "text-primary" : "")} />
|
|
</div>
|
|
<span className={cn("text-[10px] font-semibold", currentTab === 'uploads' ? "text-primary" : "")}>Uploads</span>
|
|
</button>
|
|
|
|
{/* Settings */}
|
|
<button
|
|
onClick={() => onTabChange?.('settings')}
|
|
className={cn(
|
|
"flex flex-col items-center space-y-1 transition-all group",
|
|
currentTab === 'settings' ? "text-primaryScale-500" : "text-muted-foreground"
|
|
)}
|
|
>
|
|
<div className={cn(
|
|
"p-2 rounded-xl transition-all",
|
|
currentTab === 'settings' ? "bg-primary/10" : "group-hover:bg-muted/50"
|
|
)}>
|
|
<Settings className={cn("h-6 w-6", currentTab === 'settings' ? "text-primary" : "")} />
|
|
</div>
|
|
<span className={cn("text-[10px] font-semibold", currentTab === 'settings' ? "text-primary" : "")}>Settings</span>
|
|
</button>
|
|
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|