initial commit

src/components/Tab.astro

@@ -0,0 +1,45 @@
+---
+let { path } = Astro.props;
+if (path.startsWith('/')) path = path.slice(1);
+
+const activePath = Astro.url.pathname.slice(1);
+
+const active = activePath === path;
+---
+
+<div class="tab">
+  <a href={'/' + path} class={active ? 'active' : 'inactive'}>
+    <slot />
+      <sup class="badge"
+        hx-trigger={active ? 'load, questComplete from:body' : 'load'}
+        hx-get={`/page/incomplete_count?route=${path}`}
+        hx-target="this"
+        hx-swap="innerText"
+      >
+        ?
+      </sup>
+  </a>
+</div>
+
+<style>
+  .tab {
+    position: relative;
+  }
+
+  a {
+    color: black;
+    text-decoration: none;
+  }
+
+  .tab:has(a.active) {
+    border-bottom: 2px solid black;
+  }
+
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: small;
+    margin-left: -0.5em;
+  }
+</style>