Refactor code structure for improved readability and maintainability

apps/web/src/components/layout/website/header.tsx

@@ -0,0 +1,79 @@
+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>
+  );
+}