first commit

src/components/layout/Header.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { Container } from "./Container";
+import { TextLink } from "@/components/ui/TextLink";
+import { useAuth } from "@/lib/hooks/useAuth";
+
+export function Header() {
+  const { isAuthenticated, logout } = useAuth();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return (
+    <header className="py-8 border-b border-neutral-100">
+      <Container>
+        <nav className="flex items-center justify-between">
+          <Link
+            href="/"
+            className="text-xl font-bold tracking-tighter hover:opacity-70 transition-opacity"
+          >
+            AI Blog
+          </Link>
+
+          <div className="flex items-center gap-8">
+            {mounted && (
+              <>
+                {isAuthenticated ? (
+                  <>
+                    <TextLink href="/admin">Dashboard</TextLink>
+                    <button
+                      onClick={logout}
+                      className="text-sm tracking-wide uppercase text-neutral-500 hover:text-black transition-colors"
+                    >
+                      Logout
+                    </button>
+                  </>
+                ) : (
+                  <TextLink href="/login">Login</TextLink>
+                )}
+              </>
+            )}
+          </div>
+        </nav>
+      </Container>
+    </header>
+  );
+}