Thanh Quy - wolf
142 lines
5.2 KiB
TypeScript
142 lines
5.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { SHOP_INFO, MOCK_USERS } from "@/lib/constants";
|
|
import type { User } from "@/lib/types";
|
|
|
|
/**
|
|
* Site Header — sticky top bar, always visible on all screen sizes.
|
|
*
|
|
* 3-column layout:
|
|
* [Brand: logo + name + tagline] | [Center: quick info] | [Auth button]
|
|
*
|
|
* Login state cycles for UI demo (click the button to switch):
|
|
* Guest → Manager (Quản lý) → Staff → Guest
|
|
*
|
|
* Responsive:
|
|
* - Logo + shop name : always visible
|
|
* - Tagline : hidden on mobile, shown on md+
|
|
* - Center info : hidden on mobile, shown on lg+
|
|
* - Button label : hidden on xs, shown on sm+
|
|
*/
|
|
export default function Header() {
|
|
const [user, setUser] = useState<User | null>(null);
|
|
|
|
const cycleUser = () => {
|
|
if (!user) setUser(MOCK_USERS.manager);
|
|
else if (user.role === "manager") setUser(MOCK_USERS.staff);
|
|
else setUser(null);
|
|
};
|
|
|
|
return (
|
|
<header
|
|
className="w-full sticky top-0 z-50
|
|
bg-[var(--color-bg-header)] border-b border-[var(--color-border)]
|
|
shadow-[0_1px_8px_var(--color-shadow-sm)]"
|
|
style={{ height: "var(--spacing-header-height)" }}
|
|
>
|
|
<div
|
|
className="h-full px-6 md:px-8 lg:px-12
|
|
flex items-center justify-between gap-6
|
|
max-w-screen-2xl mx-auto"
|
|
>
|
|
|
|
{/* ── LEFT: Brand ── */}
|
|
<Link
|
|
href="/"
|
|
className="flex items-center gap-4 shrink-0 no-underline group"
|
|
>
|
|
{/* Logo */}
|
|
<div className="relative w-10 h-10 md:w-11 md:h-11 shrink-0">
|
|
<Image
|
|
src={SHOP_INFO.logo}
|
|
alt={`Logo ${SHOP_INFO.name}`}
|
|
fill
|
|
className="object-contain transition-transform duration-200 group-hover:scale-105"
|
|
sizes="44px"
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
{/* Name + tagline */}
|
|
<div className="flex flex-col leading-tight">
|
|
<span
|
|
className="font-bold text-base md:text-lg
|
|
text-[var(--color-primary-dark)]
|
|
group-hover:text-[var(--color-primary)]
|
|
transition-colors duration-150"
|
|
>
|
|
{SHOP_INFO.name}
|
|
</span>
|
|
<span className="text-xs hidden md:block text-[var(--color-text-muted)]">
|
|
{SHOP_INFO.tagline}
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
|
|
{/* ── RIGHT: Auth ── */}
|
|
<div className="flex items-center gap-3 shrink-0">
|
|
|
|
{!user ? (
|
|
/* Guest: sign-in button */
|
|
<button
|
|
onClick={cycleUser}
|
|
title="Đăng nhập"
|
|
className="flex items-center gap-2.5 px-5 py-2.5 rounded-xl
|
|
text-sm font-semibold border-none cursor-pointer
|
|
bg-[var(--color-primary)] text-white
|
|
hover:bg-[var(--color-primary-dark)]
|
|
active:scale-95 transition-all duration-150"
|
|
>
|
|
<i className="fa-solid fa-right-to-bracket"></i>
|
|
<span className="hidden sm:inline">Đăng nhập</span>
|
|
</button>
|
|
|
|
) : user.role === "manager" ? (
|
|
/* Manager: gold badge */
|
|
<button
|
|
onClick={cycleUser}
|
|
title="Nhấn để đổi tài khoản (demo)"
|
|
className="flex items-center gap-2.5 px-4 py-2.5 rounded-xl
|
|
text-sm font-semibold cursor-pointer
|
|
bg-[var(--color-accent-light)] border border-[var(--color-accent)]
|
|
text-[var(--color-primary-dark)]
|
|
hover:bg-[var(--color-accent)] hover:text-white
|
|
active:scale-95 transition-all duration-150"
|
|
>
|
|
<i className="fa-solid fa-user-tie text-base"></i>
|
|
<span className="hidden sm:inline">Quản lý</span>
|
|
</button>
|
|
|
|
) : (
|
|
/* Staff / regular user: avatar + name */
|
|
<button
|
|
onClick={cycleUser}
|
|
title="Nhấn để đổi tài khoản (demo)"
|
|
className="flex items-center gap-2.5 px-4 py-2 rounded-xl
|
|
text-sm font-semibold cursor-pointer
|
|
bg-[var(--color-bg-main)] border border-[var(--color-border)]
|
|
text-[var(--color-text-secondary)]
|
|
hover:border-[var(--color-primary-light)]
|
|
hover:bg-[var(--color-border-light)]
|
|
active:scale-95 transition-all duration-150"
|
|
>
|
|
{/* Avatar circle */}
|
|
<div
|
|
className="w-7 h-7 rounded-full flex items-center justify-center shrink-0
|
|
bg-[var(--color-primary-light)] text-white text-xs"
|
|
>
|
|
<i className="fa-solid fa-user"></i>
|
|
</div>
|
|
<span className="hidden sm:inline">{user.name}</span>
|
|
</button>
|
|
)}
|
|
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|