code dump frontend

frontend/components/Header.tsx

@@ -1,6 +1,10 @@
+import * as hi from "jsr:@preact-icons/hi2";
+
 interface HeaderLink {
   name: string;
   linkTo: string;
+  // deno-lint-ignore no-explicit-any
+  icon: any;
   newTab?: boolean;
 }
 
@@ -8,34 +12,53 @@ const headerLinks: Array<HeaderLink> = [
   {
     name: "Home",
     linkTo: "/",
+    icon: <hi.HiOutlineHome />,
   },
   {
     name: "Blog",
     linkTo: "posts/",
+    icon: <hi.HiOutlineBookmarkSquare />,
   },
   {
     name: "Projects",
-    linkTo: "projects",
+    linkTo: "projects/",
+    icon: <hi.HiOutlineWrenchScrewdriver />,
   },
   {
     name: "Contact",
     linkTo: "contact/",
+    icon: <hi.HiOutlinePencilSquare />,
   },
 ];
 
 export default function Header() {
   return (
-    <div>
-      {headerLinks.map((l) => {
-        const newTab = l.newTab ? "_blank" : "_self";
-        return (
-          <div class="">
-            <a href={l.linkTo} target={newTab} class="">
-              {l.name}
+    <nav>
+      <div class="bg-[#313244] flex justify-center space-x-6 p-4">
+        {headerLinks.map((l) => {
+          const newTab = l.newTab ? "_blank" : "_self";
+          return (
+            <a
+              href={l.linkTo}
+              target={newTab}
+              class="text-[#cdd6f4]
+              text-lg 
+              font-medium 
+              transition-all 
+              duration-300 
+              ease-in-out
+              hover:text-[#cba6f7]
+              hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)]
+              hover:scale-110
+              cursor-pointer"
+            >
+              <div class="flex items-center gap-2">
+                {l.icon} {l.name}
+              </div>
             </a>
-          </div>
-        );
-      })}
-    </div>
+          );
+        })}
+      </div>
+    </nav>
   );
 }