Spaces:
Sleeping
Sleeping
File size: 2,905 Bytes
71a564a | 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 | import React from "react";
import { Link, useLocation } from "react-router-dom";
import { Bookmark, User, PlusCircle, Settings, BookOpen, UserCircle } from "lucide-react";
const Header = ({ userId, onUserIdChange, onAddBookClick, onSettingsClick }) => {
const location = useLocation();
const navLinks = [
{ path: "/", label: "Gallery", icon: BookOpen },
{ path: "/bookshelf", label: "My Bookshelf", icon: Bookmark },
{ path: "/profile", label: "Profile", icon: UserCircle },
];
return (
<header className="max-w-5xl mx-auto pt-10 px-4 flex justify-between items-end mb-12">
<div>
<Link to="/">
<div className="border border-[#333] px-4 py-1 bg-white shadow-[2px_2px_0px_0px_#eee] inline-block mb-2 hover:shadow-[3px_3px_0px_0px_#ddd] transition-shadow">
<h1 className="text-xl font-bold uppercase tracking-[0.2em] text-[#333]">Paper Shelf</h1>
</div>
</Link>
<p className="text-[10px] text-gray-400 font-medium tracking-widest">Discover books that resonate with your soul</p>
</div>
<div className="flex gap-2 items-center">
{/* User Switcher */}
<div className="flex items-center gap-2 border border-[#eee] bg-white px-2 py-1 shadow-sm mr-2" title="Switch User">
<User className="w-3 h-3 text-gray-400" />
<input
className="w-20 text-[10px] outline-none text-gray-600 font-bold bg-transparent placeholder-gray-300"
value={userId}
onChange={(e) => onUserIdChange(e.target.value)}
placeholder="User ID"
/>
</div>
{/* Add Book Button */}
<button
onClick={onAddBookClick}
className="flex items-center gap-1 px-3 py-1 bg-white border border-[#333] shadow-sm hover:shadow-md transition-all text-[10px] font-bold uppercase tracking-widest mr-2 group"
>
<PlusCircle className="w-3 h-3 text-[#b392ac] group-hover:text-[#9d7799]" /> Add Book
</button>
{/* Navigation Links */}
{navLinks.map(({ path, label, icon: Icon }) => (
<Link
key={path}
to={path}
className={`px-4 py-2 text-sm font-bold transition-all flex items-center gap-1 ${
location.pathname === path
? "bg-[#b392ac] text-white hover:bg-[#9d7799]"
: "bg-transparent text-[#b392ac] border-b-2 border-transparent hover:border-[#b392ac]"
}`}
>
<Icon className="w-4 h-4" />
{label}
</Link>
))}
{/* Settings */}
<button
onClick={onSettingsClick}
className="p-2 hover:bg-gray-100 rounded-full transition-colors"
title="Settings"
>
<Settings className="w-4 h-4 text-gray-500" />
</button>
</div>
</header>
);
};
export default Header;
|