79 lines
3.0 KiB
TypeScript
79 lines
3.0 KiB
TypeScript
import { ModeToggle } from "@/components/mode-theme";
|
|
import { Button } from "@workspace/ui/components/button";
|
|
import { BookOpen, ChartNoAxesColumnIncreasing, Compass, LogIn, Pencil } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
export function Header() {
|
|
return (
|
|
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
<div className="container mx-auto px-4">
|
|
<div className="flex items-center justify-between h-16">
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden md:flex items-center space-x-6">
|
|
{/* Logo */}
|
|
<Link href="/" className="flex items-center space-x-3">
|
|
<div className="w-8 h-8 bg-gradient-to-r from-orange-500 to-red-500 rounded-lg flex items-center justify-center">
|
|
<BookOpen className="w-5 h-5 text-white" />
|
|
</div>
|
|
<span className="text-xl font-bold bg-gradient-to-r from-orange-500 to-red-500 bg-clip-text text-transparent">
|
|
Webnovel Fever
|
|
</span>
|
|
</Link>
|
|
{/* Navigation Links */}
|
|
<div className="flex items-center space-x-2">
|
|
<Button variant="ghost" asChild>
|
|
<Link href="/browse">
|
|
<Compass className="inline w-4 h-4" />
|
|
<span>Browse</span>
|
|
</Link>
|
|
</Button>
|
|
|
|
<Button variant="ghost" asChild>
|
|
<Link href="/ranking">
|
|
<ChartNoAxesColumnIncreasing className="inline w-4 h-4 -rotate-90" />
|
|
<span>Ranking</span>
|
|
</Link>
|
|
</Button>
|
|
|
|
<Button variant="ghost" asChild>
|
|
<Link href="/author">
|
|
<Pencil className="inline w-4 h-4" />
|
|
<span>Create</span>
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</nav>
|
|
{/* Search Bar */}
|
|
<div className="hidden md:flex items-center flex-1 max-w-md mx-8"></div>
|
|
{/* Right Side Actions */}
|
|
<div className="flex items-center space-x-2">
|
|
{/* Theme Toggle */}
|
|
<ModeToggle />
|
|
{/* Creator Library Link */}
|
|
<Button variant="ghost" size="sm" asChild>
|
|
<Link href="/library">
|
|
<BookOpen className="w-4 h-4 mr-1" />
|
|
Library
|
|
</Link>
|
|
</Button>
|
|
{/* User Profile or Sign In */}
|
|
<>
|
|
<Button size="sm" asChild>
|
|
<Link href="/sign-in">
|
|
<LogIn className="w-4 h-4 mr-1" />
|
|
Sign In
|
|
</Link>
|
|
</Button>
|
|
<Button size="sm" variant="outline" asChild>
|
|
<Link href="/sign-up">
|
|
<LogIn className="w-4 h-4 mr-1" />
|
|
Sign Up
|
|
</Link>
|
|
</Button>
|
|
</>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
} |