File size: 4,285 Bytes
f201243 fb69858 f201243 fb69858 f201243 254d33c f201243 b8b7791 f201243 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
"use client";
import React from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { Home, Rocket, Grid, Layers, LogOut, User, Wand2 } from "lucide-react";
import { useAuthStore } from "@/store/authStore";
import { Button } from "@/components/ui/Button";
export const Header: React.FC = () => {
const pathname = usePathname();
const router = useRouter();
const { isAuthenticated, user, logout } = useAuthStore();
const navItems = [
{ href: "/", label: "Dashboard", icon: Home },
{ href: "/generate", label: "Generate", icon: Rocket },
{ href: "/creative/modify", label: "Modify", icon: Wand2 },
{ href: "/gallery", label: "Gallery", icon: Grid },
{ href: "/matrix", label: "Matrix", icon: Layers },
];
const handleLogout = () => {
logout();
router.push("/login");
};
return (
<header className="sticky top-0 z-50 glass border-b border-white/20 backdrop-blur-xl transition-all duration-300">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-20">
<div className="flex items-center">
<Link href="/" className="flex items-center space-x-3 group">
<div className="relative">
<Rocket className="h-8 w-8 text-blue-500 group-hover:text-cyan-500 transition-all duration-300 group-hover:scale-110 group-hover:-translate-y-1" />
<div className="absolute inset-0 bg-blue-500/20 rounded-full blur-xl group-hover:bg-cyan-500/20 transition-colors duration-300"></div>
</div>
<span className="text-2xl font-bold gradient-text group-hover:scale-105 transition-transform duration-300">
PsyAdGenesis
</span>
</Link>
</div>
<div className="flex items-center space-x-4">
<nav className="hidden md:flex space-x-2">
{navItems.map((item) => {
const Icon = item.icon;
const isActive = pathname === item.href ||
(item.href !== "/" && pathname?.startsWith(item.href));
return (
<Link
key={item.href}
href={item.href}
className={`relative flex items-center space-x-2 px-5 py-2.5 rounded-xl text-sm font-semibold transition-all duration-300 ${
isActive
? "bg-gradient-to-r from-blue-500 to-cyan-500 text-white shadow-lg scale-105"
: "text-gray-700 hover:bg-white/50 hover:text-gray-900 hover:scale-105"
}`}
>
<Icon className={`h-4 w-4 transition-transform duration-300 ${isActive ? "scale-110" : ""}`} />
<span>{item.label}</span>
{isActive && (
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-500 to-cyan-500 opacity-50 blur-sm -z-10"></div>
)}
</Link>
);
})}
</nav>
{isAuthenticated ? (
<div className="flex items-center space-x-3">
<div className="hidden md:flex items-center space-x-2 px-4 py-2 rounded-xl bg-white/50 backdrop-blur-sm text-gray-700">
<User className="h-4 w-4" />
<span className="text-sm font-semibold">{user?.username}</span>
</div>
<Button
variant="outline"
size="sm"
onClick={handleLogout}
>
<div className="flex items-center space-x-2">
<LogOut className="h-4 w-4" />
<span className="hidden sm:inline">Logout</span>
</div>
</Button>
</div>
) : (
pathname !== "/login" && (
<Link href="/login">
<Button variant="primary" size="sm">
Login
</Button>
</Link>
)
)}
</div>
</div>
</div>
</header>
);
};
|