myron/kino-app
1
0
Fork 0
mirror of https://github.com/myronblair/kino-app synced 2026-07-27 21:18:43 -05:00
Code Issues Packages Projects Releases Wiki Activity

auto-commit for 14921357-f5e2-4aba-b4c1-a07a52c800cc

Browse Source
This commit is contained in:
emergent-agent-e1
2026-04-29 16:01:20 +00:00
parent 1d4bd4f513
commit cdc8c8955f
19 changed files with 1933 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Navbar.jsx
+37 -51
View File
@@ -1,10 +1,12 @@
import { Link, NavLink, useNavigate } from "react-router-dom";
import { useAuth } from "../lib/auth";
import { Search, LogOut, Upload, ListVideo } from "lucide-react";
import { useProfile } from "../lib/profile";
import { Search, LogOut, Upload, Users, Settings as SettingsIcon } from "lucide-react";
import { useState, useEffect } from "react";
export const Navbar = () => {
const { user, logout } = useAuth();
const { active, clearActive } = useProfile();
const nav = useNavigate();
const [scrolled, setScrolled] = useState(false);
@@ -15,23 +17,19 @@ export const Navbar = () => {
}, []);
const linkClass = ({ isActive }) =>
`text-sm tracking-wide transition-colors duration-300 ${
isActive ? "text-white" : "text-[#8A8A8A] hover:text-white"
}`;
`text-sm tracking-wide transition-colors duration-300 ${isActive ? "text-white" : "text-[#8A8A8A] hover:text-white"}`;
const switchProfile = () => {
clearActive();
nav("/profile");
};
return (
<header
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
scrolled ? "glass border-b" : ""
}`}
data-testid="main-navbar"
>
<header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${scrolled ? "glass border-b" : ""}`} data-testid="main-navbar">
<div className="px-6 md:px-12 py-4 flex items-center justify-between">
<div className="flex items-center gap-10">
<Link to="/browse" className="flex items-center gap-2" data-testid="nav-logo">
<span className="font-display text-2xl font-black tracking-tighter text-white">
Kino
</span>
<span className="font-display text-2xl font-black tracking-tighter text-white">Kino</span>
<span className="text-[#D9381E] text-2xl leading-none">.</span>
</Link>
{user && (
@@ -39,60 +37,48 @@ export const Navbar = () => {
<NavLink to="/browse" className={linkClass} data-testid="nav-browse">Browse</NavLink>
<NavLink to="/my-list" className={linkClass} data-testid="nav-my-list">My List</NavLink>
<NavLink to="/requests" className={linkClass} data-testid="nav-requests">Requests</NavLink>
{user.is_admin && (
<NavLink to="/admin" className={linkClass} data-testid="nav-admin">Admin</NavLink>
)}
{user.is_admin && <NavLink to="/admin" className={linkClass} data-testid="nav-admin">Admin</NavLink>}
</nav>
)}
</div>
{user ? (
<div className="flex items-center gap-4">
<button
onClick={() => nav("/search")}
className="text-[#8A8A8A] hover:text-white transition-colors duration-300"
data-testid="nav-search-button"
aria-label="Search"
>
<button onClick={() => nav("/search")} className="text-[#8A8A8A] hover:text-white transition-colors duration-300" data-testid="nav-search-button" aria-label="Search">
<Search size={18} strokeWidth={1.5} />
</button>
{user.is_admin && (
<button
onClick={() => nav("/admin/upload")}
className="hidden sm:flex items-center gap-2 text-xs uppercase tracking-[0.2em] text-[#8A8A8A] hover:text-white transition-colors duration-300"
data-testid="nav-upload-button"
>
<Upload size={14} strokeWidth={1.5} /> Upload
</button>
<>
<button onClick={() => nav("/admin/upload")} className="hidden sm:flex items-center gap-2 text-xs uppercase tracking-[0.2em] text-[#8A8A8A] hover:text-white transition-colors duration-300" data-testid="nav-upload-button">
<Upload size={14} strokeWidth={1.5} /> Upload
</button>
<button onClick={() => nav("/admin/settings")} className="hidden sm:flex items-center gap-2 text-xs uppercase tracking-[0.2em] text-[#8A8A8A] hover:text-white transition-colors duration-300" data-testid="nav-settings-button">
<SettingsIcon size={14} strokeWidth={1.5} /> Settings
</button>
</>
)}
<div className="flex items-center gap-3 pl-4 border-l border-[#222]">
<div className="hidden sm:flex flex-col items-end leading-tight">
<span className="text-xs text-white" data-testid="nav-user-name">{user.name}</span>
<span className="text-[10px] uppercase tracking-[0.2em] text-[#8A8A8A]">
{user.is_admin ? "Admin" : "Member"}
</span>
</div>
<div className="w-8 h-8 bg-[#D9381E] flex items-center justify-center text-white text-xs font-medium">
{user.name?.[0]?.toUpperCase() || "U"}
</div>
<button
onClick={() => { logout(); nav("/login"); }}
className="text-[#8A8A8A] hover:text-white transition-colors duration-300"
data-testid="nav-logout-button"
aria-label="Logout"
>
<button onClick={switchProfile} className="flex items-center gap-2 group" data-testid="nav-switch-profile" title="Switch profile">
{active && (
<>
<div className="hidden sm:flex flex-col items-end leading-tight">
<span className="text-xs text-white">{active.name}</span>
<span className="text-[10px] uppercase tracking-[0.2em] text-[#8A8A8A] group-hover:text-white transition-colors">switch</span>
</div>
<div className="w-8 h-8 flex items-center justify-center text-white text-xs font-medium" style={{ backgroundColor: active.avatar_color || "#D9381E" }}>
{active.name?.[0]?.toUpperCase() || "U"}
</div>
</>
)}
{!active && <Users size={18} strokeWidth={1.5} className="text-[#8A8A8A]" />}
</button>
<button onClick={() => { logout(); nav("/login"); }} className="text-[#8A8A8A] hover:text-white transition-colors duration-300" data-testid="nav-logout-button" aria-label="Logout">
<LogOut size={16} strokeWidth={1.5} />
</button>
</div>
</div>
) : (
<Link
to="/login"
className="text-sm tracking-wide bg-[#D9381E] hover:bg-[#ED4B32] text-white px-5 py-2 transition-colors duration-300"
data-testid="nav-sign-in"
>
Sign in
</Link>
<Link to="/login" className="text-sm tracking-wide bg-[#D9381E] hover:bg-[#ED4B32] text-white px-5 py-2 transition-colors duration-300" data-testid="nav-sign-in">Sign in</Link>
)}
</div>
</header>