💄 feat: implement frontend

components/navbar.tsx

@@ -0,0 +1,49 @@
+import { h, tw } from "../deps.ts";
+
+const NavBar = (
+  props: {
+    size?: "small" | "large";
+    theme?: "light" | "dark";
+  },
+) => {
+  const { size = "large", theme = "light" } = props;
+  let bgColor, textColor, padding, imageSize, textSize;
+  if (theme === "light") {
+    bgColor = "bg-white";
+    textColor = "text-black";
+  } else {
+    bgColor = "bg-black";
+    textColor = "text-white";
+  }
+  if (size === "small") {
+    padding = "p-5";
+    imageSize = "h-16";
+    textSize = "text-4xl";
+  } else {
+    padding = "p-6";
+    imageSize = "h-20";
+    textSize = "text-5xl";
+  }
+
+  return (
+    <div class={tw`flex items-center gap-4 ${padding} ${bgColor} ${textColor}`}>
+      <img src="" class={tw`flex-initial aspect-square ${imageSize}`} />
+      <p
+        class={tw`text-6xl font-bold ${
+          size === "small"
+            ? "none"
+            : null
+        }`}
+      >
+        Harmony{" "}
+      </p>
+      <p
+        class={tw`${textSize}`}
+      >
+        by Example
+      </p>
+    </div>
+  );
+};
+
+export default NavBar;

pages/index.tsx

@@ -2,13 +2,15 @@
 
 import { h, html, Page, ssr, tw } from "./common.ts";
 import { examples, parseExample } from "../examples/mod.ts";
+import NavBar from "../components/navbar.tsx";
 
 let cached: string | null;
 
 function Index() {
   return ssr(() => [
     <title>Harmony by Example</title>,
-    <div class={tw`bg-white flex h-screen`}>
+    <div class={tw`bg-white flex h-screen flex-column`}>
+      <NavBar />
       <h1 class={tw`text-5xl text-gray-600 m-auto mt-20`}>
         Harmony by Example
       </h1>