1 files changed, 36 insertions, 0 deletions
diff --git a/src/components/Header.astro b/src/components/Header.astro
new file mode 100644
index 0000000..ff7dafe
--- /dev/null
+++ b/src/components/Header.astro
@@ -0,0 +1,36 @@
+---
+import Link from '@/components/Link.astro'
+import ThemeToggle from '@/components/ThemeToggle.astro'
+import { NAV_LINKS, SITE } from '@/consts'
+import { Image } from 'astro:assets'
+import logo from '../../public/static/logo.svg'
+---
+
+<div>
+  <div
+    class="mx-auto flex max-w-3xl items-center justify-between gap-4 px-4 py-3"
+  >
+    <Link href="/" class="flex shrink-0 items-center justify-center gap-3">
+      <Image src={logo} alt="Logo" class="size-5 sm:size-6" />
+      <span
+        class="hidden h-full text-lg leading-none font-medium min-[400px]:block"
+        >{SITE.title}</span
+      >
+    </Link>
+    <div class="flex items-center gap-4">
+      <nav class="flex items-center gap-4 text-sm sm:gap-6">
+        {
+          NAV_LINKS.map((item) => (
+            <Link
+              href={item.href}
+              class="text-foreground/60 hover:text-foreground capitalize transition-colors"
+            >
+              {item.label}
+            </Link>
+          ))
+        }
+      </nav>
+      <ThemeToggle transition:persist />
+    </div>
+  </div>
+</div>