127 lines
6.3 KiB
TypeScript
127 lines
6.3 KiB
TypeScript
"use client";
|
|
|
|
import React from 'react';
|
|
import { useStore } from '@/lib/store';
|
|
import { Sparkles, LayoutGrid, Clock, Settings, User } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import { motion } from 'framer-motion';
|
|
|
|
export function Navbar() {
|
|
const { currentView, setCurrentView, setSelectionMode } = useStore();
|
|
|
|
const navItems = [
|
|
{ id: 'gallery', label: 'Create', icon: Sparkles },
|
|
{ id: 'library', label: 'Prompt Library', icon: LayoutGrid },
|
|
{ id: 'history', label: 'Uploads', icon: Clock },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<div className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-xl border-b border-border">
|
|
{/* Yellow Accent Line */}
|
|
<div className="h-1 w-full bg-primary" />
|
|
|
|
<div className="flex items-center justify-between px-4 h-16 max-w-7xl mx-auto">
|
|
{/* Logo Area */}
|
|
<div className="flex items-center gap-3">
|
|
<div className="h-10 w-10 rounded-full bg-primary/20 flex items-center justify-center text-primary">
|
|
<Sparkles className="h-6 w-6" />
|
|
</div>
|
|
<span className="text-xl font-bold text-foreground tracking-tight">kv-pix</span>
|
|
</div>
|
|
|
|
{/* Center Navigation (Desktop) */}
|
|
<div className="hidden md:flex items-center gap-1 bg-secondary/50 p-1 rounded-full border border-border/50">
|
|
{navItems.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => {
|
|
setCurrentView(item.id as any);
|
|
if (item.id === 'history') setSelectionMode(null);
|
|
}}
|
|
className={cn(
|
|
"flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all",
|
|
currentView === item.id
|
|
? "bg-primary text-primary-foreground shadow-sm"
|
|
: "text-muted-foreground hover:text-foreground hover:bg-secondary"
|
|
)}
|
|
>
|
|
<item.icon className="h-4 w-4" />
|
|
<span>{item.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Right Actions */}
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => setCurrentView('settings')}
|
|
className={cn(
|
|
"p-2 transition-colors",
|
|
currentView === 'settings'
|
|
? "text-primary bg-primary/10 rounded-full"
|
|
: "text-muted-foreground hover:text-primary"
|
|
)}
|
|
>
|
|
<Settings className="h-5 w-5" />
|
|
</button>
|
|
<div className="h-8 w-px bg-border mx-1" />
|
|
<button className="flex items-center gap-2 pl-1 pr-3 py-1 bg-card hover:bg-secondary border border-border rounded-full transition-colors">
|
|
<div className="h-7 w-7 rounded-full bg-primary/20 flex items-center justify-center text-primary text-xs font-bold">
|
|
KV
|
|
</div>
|
|
<span className="text-sm font-medium hidden sm:block">Khoa Vo</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Bottom Navigation */}
|
|
<div className="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-[#18181B]/90 backdrop-blur-xl border-t border-white/10 safe-area-bottom">
|
|
<div className="flex items-center justify-around h-16 px-2">
|
|
{navItems.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => {
|
|
setCurrentView(item.id as any);
|
|
if (item.id === 'history') setSelectionMode(null);
|
|
}}
|
|
className={cn(
|
|
"flex flex-col items-center justify-center gap-1 p-2 rounded-xl transition-all w-16",
|
|
currentView === item.id
|
|
? "text-primary"
|
|
: "text-white/40 hover:text-white/80"
|
|
)}
|
|
>
|
|
<div className={cn(
|
|
"p-1.5 rounded-full transition-all",
|
|
currentView === item.id ? "bg-primary/10" : "bg-transparent"
|
|
)}>
|
|
<item.icon className="h-5 w-5" />
|
|
</div>
|
|
<span className="text-[10px] font-medium">{item.label}</span>
|
|
</button>
|
|
))}
|
|
{/* Settings Item for Mobile */}
|
|
<button
|
|
onClick={() => setCurrentView('settings')}
|
|
className={cn(
|
|
"flex flex-col items-center justify-center gap-1 p-2 rounded-xl transition-all w-16",
|
|
currentView === 'settings'
|
|
? "text-primary"
|
|
: "text-white/40 hover:text-white/80"
|
|
)}
|
|
>
|
|
<div className={cn(
|
|
"p-1.5 rounded-full transition-all",
|
|
currentView === 'settings' ? "bg-primary/10" : "bg-transparent"
|
|
)}>
|
|
<Settings className="h-5 w-5" />
|
|
</div>
|
|
<span className="text-[10px] font-medium">Settings</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|