Spaces:
Running
Running
File size: 5,728 Bytes
72f0edb |
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 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 |
import React from "react";
import { Link, useLocation } from "react-router-dom";
import { Compass, User, Gamepad2 } from "lucide-react";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
// import { useProjects } from '../hooks/use-projects';
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";
const Header: React.FC = () => {
// const { projects } = useProjects();
const location = useLocation();
const isActive = (path: string) => {
return location.pathname === path;
};
return (
<header className="backdrop-blur-md py-4 px-6 flex items-center justify-between sticky top-0 z-50 shadow-lg border-b border-white/5 bg-zinc-950">
<div className="flex items-center">
<Link to="/" className="flex items-center mr-8 group">
<div className="w-10 h-10 overflow-hidden">
<img
src="/lovable-uploads/166630d9-f089-4678-a27c-7a00882f5ed0.png"
alt="Spiral Logo"
className="w-full h-full object-contain transition-transform group-hover:scale-110"
/>
</div>
<span className="ml-2 text-white font-bold text-xl tracking-wider group-hover:text-blue-400 transition-colors">
QUALIA
</span>
</Link>
<nav className="hidden md:flex space-x-8">
{/* <Link
to="/"
className="flex items-center gap-2 text-white/80 hover:text-white transition-colors text-sm"
>
<Home size={16} />
<span>Home</span>
</Link> */}
<Link
to="/explore"
className={cn(
"flex items-center gap-2 transition-colors text-sm relative",
isActive("/explore")
? "text-blue-400 font-medium"
: "text-white/80 hover:text-white"
)}
>
<Compass size={16} />
<span>Explore</span>
{isActive("/explore") && (
<div className="absolute -bottom-2 left-0 w-full h-0.5 bg-blue-400 rounded-full" />
)}
</Link>
{/* <Link
to="/my-list"
className="flex items-center gap-2 text-white/80 hover:text-white transition-colors text-sm"
>
<Archive size={16} />
<span>Projects</span>
</Link> */}
<Link
to="/playground"
className={cn(
"flex items-center gap-2 transition-colors text-sm relative",
isActive("/playground")
? "text-blue-400 font-medium"
: "text-white/80 hover:text-white"
)}
>
<div className="flex items-center gap-2">
<Gamepad2 size={16} />
<span>Playground</span>
</div>
{isActive("/playground") && (
<div className="absolute -bottom-2 left-0 w-full h-0.5 bg-blue-400 rounded-full" />
)}
</Link>
</nav>
</div>
<div className="flex items-center space-x-6">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<div className="w-9 h-9 bg-gradient-to-br from-blue-500 to-purple-600 rounded-md transition-transform hover:scale-110 cursor-pointer flex items-center justify-center">
<Avatar className="w-full h-full">
<AvatarImage src="" alt="Profile" />
<AvatarFallback className="bg-transparent text-white">
<User size={18} />
</AvatarFallback>
</Avatar>
</div>
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="w-56 bg-zinc-900 border-zinc-800 text-white"
>
<DropdownMenuLabel className="font-normal">
<div className="flex flex-col space-y-1">
<p className="text-sm font-medium leading-none">Victor</p>
<p className="text-xs leading-none text-zinc-400">
[email protected]
</p>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator className="bg-zinc-800" />
<DropdownMenuLabel>Your Projects</DropdownMenuLabel>
{/* {projects.length > 0 ? (
<>
{projects.slice(0, 3).map(project => (
<DropdownMenuItem key={project.id} className="cursor-pointer hover:bg-zinc-800" asChild>
<Link to={`/my-list?project=${project.id}`} className="w-full">
<span className="truncate">{project.name}</span>
</Link>
</DropdownMenuItem>
))}
{projects.length > 3 && (
<DropdownMenuItem className="text-xs text-zinc-400 hover:bg-zinc-800" asChild>
<Link to="/my-list">View all projects</Link>
</DropdownMenuItem>
)}
</>
) : (
<DropdownMenuItem className="text-zinc-400 cursor-default">
No projects yet
</DropdownMenuItem>
)} */}
<DropdownMenuSeparator className="bg-zinc-800" />
<DropdownMenuItem
className="cursor-pointer hover:bg-zinc-800"
asChild
>
<Link to="/my-list">Manage Projects</Link>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</header>
);
};
export default Header;
|