321 lines
13 KiB
TypeScript
321 lines
13 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { usePathname, useRouter } from "next/navigation"
|
|
import { useEffect, useState } from "react"
|
|
import { BookOpen, Menu, Search, LogOut, BookMarked, Shield } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Sheet, SheetContent, SheetTrigger, SheetTitle } from "@/components/ui/sheet"
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
|
|
import { ThemeToggle } from "@/components/theme-toggle"
|
|
import { useAuth } from "@/lib/auth-context"
|
|
|
|
const navLinks = [
|
|
{ label: "Trang Chủ", href: "/" },
|
|
{ label: "Thể Loại", href: "/the-loai" },
|
|
{ label: "Danh Sách", href: "/tim-kiem" },
|
|
]
|
|
|
|
type SearchSuggestion = {
|
|
id: string
|
|
title: string
|
|
slug: string
|
|
authorName: string
|
|
coverUrl?: string | null
|
|
series?: { id: string; name: string } | null
|
|
}
|
|
|
|
function roleLabel(role?: "USER" | "MOD" | "ADMIN") {
|
|
if (role === "ADMIN") return "Quản trị viên"
|
|
if (role === "MOD") return "Kiểm duyệt viên"
|
|
return "Thành viên"
|
|
}
|
|
|
|
export function Header() {
|
|
const pathname = usePathname()
|
|
const router = useRouter()
|
|
const { user, logout } = useAuth()
|
|
const [searchQuery, setSearchQuery] = useState("")
|
|
const [suggestions, setSuggestions] = useState<SearchSuggestion[]>([])
|
|
const [isSearchFocused, setIsSearchFocused] = useState(false)
|
|
const [open, setOpen] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const query = searchQuery.trim()
|
|
if (query.length < 2) {
|
|
setSuggestions([])
|
|
return
|
|
}
|
|
|
|
const controller = new AbortController()
|
|
const timeoutId = setTimeout(async () => {
|
|
try {
|
|
const res = await fetch(`/api/truyen/suggest?q=${encodeURIComponent(query)}`, {
|
|
signal: controller.signal,
|
|
})
|
|
|
|
if (!res.ok) {
|
|
setSuggestions([])
|
|
return
|
|
}
|
|
|
|
const data = await res.json()
|
|
setSuggestions(Array.isArray(data) ? data : [])
|
|
} catch {
|
|
setSuggestions([])
|
|
}
|
|
}, 250)
|
|
|
|
return () => {
|
|
controller.abort()
|
|
clearTimeout(timeoutId)
|
|
}
|
|
}, [searchQuery])
|
|
|
|
const goToSuggestion = (slug: string) => {
|
|
router.push(`/truyen/${slug}`)
|
|
setSearchQuery("")
|
|
setSuggestions([])
|
|
setIsSearchFocused(false)
|
|
}
|
|
|
|
const handleSearch = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (searchQuery.trim()) {
|
|
router.push(`/tim-kiem?q=${encodeURIComponent(searchQuery.trim())}`)
|
|
setSearchQuery("")
|
|
setSuggestions([])
|
|
setIsSearchFocused(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
<div className="mx-auto flex h-14 max-w-6xl items-center gap-4 px-4">
|
|
{/* Logo */}
|
|
<Link href="/" className="flex shrink-0 items-center gap-2 pr-2">
|
|
<BookOpen className="h-5 w-5 text-primary" />
|
|
<span className="text-lg font-bold text-foreground">Virtus's Reader</span>
|
|
</Link>
|
|
|
|
{/* Desktop Nav */}
|
|
<nav className="hidden items-center gap-1 md:flex">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
|
|
pathname === link.href
|
|
? "bg-secondary text-foreground"
|
|
: "text-muted-foreground hover:bg-secondary hover:text-foreground"
|
|
}`}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
{/* Search */}
|
|
<form onSubmit={handleSearch} className="hidden flex-1 md:flex md:max-w-sm md:ml-auto">
|
|
<div className="relative w-full">
|
|
<Search className="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
type="search"
|
|
placeholder="Tìm truyện..."
|
|
className="h-9 pl-8"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
onFocus={() => setIsSearchFocused(true)}
|
|
onBlur={() => setTimeout(() => setIsSearchFocused(false), 120)}
|
|
/>
|
|
|
|
{isSearchFocused && searchQuery.trim().length >= 2 && (
|
|
<div className="absolute top-[calc(100%+6px)] z-50 w-full overflow-hidden rounded-md border border-border bg-popover shadow-lg">
|
|
{suggestions.length > 0 ? (
|
|
suggestions.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
type="button"
|
|
onClick={() => goToSuggestion(item.slug)}
|
|
className="flex w-full items-center gap-3 border-b border-border px-3 py-2 text-left last:border-b-0 hover:bg-muted/40"
|
|
>
|
|
<img
|
|
src={item.coverUrl || "/default-cover.svg"}
|
|
alt={item.title}
|
|
className="h-12 w-9 rounded-sm bg-muted object-contain"
|
|
/>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-medium text-foreground">{item.title}</p>
|
|
<p className="truncate text-xs text-muted-foreground">{item.authorName}</p>
|
|
</div>
|
|
{item.series?.name && (
|
|
<span className="max-w-[120px] truncate text-[11px] font-medium text-primary">
|
|
{item.series.name}
|
|
</span>
|
|
)}
|
|
</button>
|
|
))
|
|
) : (
|
|
<div className="px-3 py-2 text-sm text-muted-foreground">Không tìm thấy kết quả phù hợp.</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</form>
|
|
|
|
{/* Right Actions */}
|
|
<div className="ml-auto flex items-center gap-1 md:ml-0">
|
|
<ThemeToggle />
|
|
|
|
{user ? (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-9 w-9">
|
|
{user.avatarUrl ? (
|
|
<img src={user.avatarUrl} alt={user.username} className="h-6 w-6 rounded-full" />
|
|
) : (
|
|
<div className={`flex h-6 w-6 items-center justify-center rounded-full text-xs font-bold text-background ${user.avatarColor}`}>
|
|
{user.username.charAt(0).toUpperCase()}
|
|
</div>
|
|
)}
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-48">
|
|
<div className="px-2 py-1.5">
|
|
<p className="text-sm font-medium text-foreground">{user.username}</p>
|
|
<p className="text-xs text-muted-foreground">{user.email}</p>
|
|
<p className="text-xs text-primary">Loại tài khoản: {roleLabel(user.role)}</p>
|
|
</div>
|
|
<DropdownMenuSeparator />
|
|
{(user.role === "MOD" || user.role === "ADMIN") && (
|
|
<>
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/mod" className="flex items-center gap-2 text-primary font-medium">
|
|
<Shield className="h-4 w-4" />
|
|
Trang Quản Trị
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
</>
|
|
)}
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/tu-sach" className="flex items-center gap-2">
|
|
<BookMarked className="h-4 w-4" />
|
|
Tủ Sách
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={logout} className="flex items-center gap-2 text-destructive">
|
|
<LogOut className="h-4 w-4" />
|
|
Đăng Xuất
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
) : (
|
|
<div className="hidden md:flex">
|
|
<Button size="sm" asChild>
|
|
<Link href="/dang-nhap">Dang Nhap</Link>
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Mobile menu */}
|
|
<Sheet open={open} onOpenChange={setOpen}>
|
|
<SheetTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-9 w-9 md:hidden">
|
|
<Menu className="h-5 w-5" />
|
|
<span className="sr-only">Menu</span>
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="right" className="w-72">
|
|
<SheetTitle className="sr-only">Menu điều hướng</SheetTitle>
|
|
<div className="flex flex-col gap-4 pt-4">
|
|
<form onSubmit={(e) => { handleSearch(e); setOpen(false) }}>
|
|
<div className="relative">
|
|
<Search className="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
type="search"
|
|
placeholder="Tìm truyện..."
|
|
className="pl-8"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
</div>
|
|
</form>
|
|
<nav className="flex flex-col gap-1">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
onClick={() => setOpen(false)}
|
|
className={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
|
|
pathname === link.href
|
|
? "bg-secondary text-foreground"
|
|
: "text-muted-foreground hover:bg-secondary hover:text-foreground"
|
|
}`}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
{user && (
|
|
<>
|
|
{(user.role === "MOD" || user.role === "ADMIN") && (
|
|
<Link
|
|
href="/mod"
|
|
onClick={() => setOpen(false)}
|
|
className="rounded-md px-3 py-2 text-sm font-medium text-primary hover:bg-secondary flex items-center gap-2"
|
|
>
|
|
<Shield className="h-4 w-4" />
|
|
Trang Quản Trị
|
|
</Link>
|
|
)}
|
|
<Link
|
|
href="/tu-sach"
|
|
onClick={() => setOpen(false)}
|
|
className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-secondary hover:text-foreground flex items-center gap-2"
|
|
>
|
|
<BookMarked className="h-4 w-4" />
|
|
Tủ Sách
|
|
</Link>
|
|
</>
|
|
)}
|
|
</nav>
|
|
{!user && (
|
|
<div className="border-t border-border pt-4">
|
|
<Button asChild onClick={() => setOpen(false)}>
|
|
<Link href="/dang-nhap">Dang Nhap</Link>
|
|
</Button>
|
|
</div>
|
|
)}
|
|
{user && (
|
|
<div className="border-t border-border pt-4">
|
|
<div className="flex items-center gap-2 px-3 pb-3">
|
|
{user.avatarUrl ? (
|
|
<img src={user.avatarUrl} alt={user.username} className="h-8 w-8 rounded-full" />
|
|
) : (
|
|
<div className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold text-background ${user.avatarColor}`}>
|
|
{user.username.charAt(0).toUpperCase()}
|
|
</div>
|
|
)}
|
|
<div>
|
|
<p className="text-sm font-medium text-foreground">{user.username}</p>
|
|
<p className="text-xs text-muted-foreground">{user.email}</p>
|
|
<p className="text-xs text-primary">Loại tài khoản: {roleLabel(user.role)}</p>
|
|
</div>
|
|
</div>
|
|
<Button variant="ghost" size="sm" className="w-full justify-start text-destructive" onClick={() => { logout(); setOpen(false) }}>
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
Đăng Xuất
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|