feat: new website

src/ui/Layout/Taskbar.ts

@@ -0,0 +1,101 @@
+import favicon from "public/favicon.png?url"
+import linkedin from "public/icons/linkedin.svg?raw"
+import github from "public/icons/github.svg?raw"
+import aboutIcon from "public/icons/about.png?url"
+import experienceIcon from "public/icons/experience.png?url"
+import projectsIcon from "public/icons/projects.png?url"
+import techIcon from "public/icons/tech.png?url"
+
+const vr = hr(height("20px"), margin("0px 2px"))
+
+export default function Taskbar({ url }: { url: string }) {
+  return div.window(
+    textWrapMode.nowrap,
+    overflowX.hidden,
+    margin("10px"),
+    div(
+      display.flex,
+      alignItems.center,
+      gap("2px"),
+      div(
+        display.flex,
+        paddingLeft("4px"),
+        img(
+          { src: favicon },
+          width("12px"),
+          height("12px"),
+          marginRight("4px"),
+        ),
+        div(fontWeight.bold, "Dan Finch"),
+      ),
+      vr,
+      a(
+        { title: "LinkedIn" },
+        { href: "https://www.linkedin.com/in/danfinch/" },
+        raw(linkedin),
+      ),
+      a(
+        { title: "GitHub" },
+        { href: "https://github.com/errilaz" },
+        raw(github),
+      ),
+      vr,
+      Task({
+        icon: aboutIcon,
+        title: "About",
+        href: "/",
+        active: url === "/",
+      }),
+      Task({
+        icon: projectsIcon,
+        title: "Projects",
+        href: "/projects",
+        active: url === "/projects",
+      }),
+      Task({
+        icon: experienceIcon,
+        title: "Experience",
+        href: "/experience",
+        active: url === "/experience",
+      }),
+      Task({
+        icon: techIcon,
+        title: "Tech",
+        href: "/tech",
+        active: url === "/tech",
+      }),
+    ),
+  )
+}
+
+function Task({
+  icon,
+  title,
+  href,
+  active,
+}: {
+  icon: string
+  title: Content
+  href?: string
+  active?: boolean
+}) {
+  return a.button(
+    { href },
+    active && className("active"),
+    padding("0 4px"),
+    textAlign.left,
+    div(
+      width("100%"),
+      pad("4px"),
+      display.flex,
+      justifyContent.flexStart,
+      img(
+        { src: icon },
+        width("12px"),
+        height("12px"),
+        marginRight("4px"),
+      ),
+      span(title),
+    ),
+  )
+}