my shit

webui/src/primitives/Layout.sass

@@ -0,0 +1,17 @@
+@import "../res/colors"
+
+.Tabs-container
+  background-color: $color-foreground-dark
+
+  .Tabs-element
+    display: inline-block
+    padding: 0.25em 0.7ch
+    cursor: pointer
+    user-select: none
+
+  .Tabs-active
+    border-bottom: 1px solid $color-foreground
+
+  .Tabs-bold
+    font-family: 'Bitstream Vera Serif', 'Lucida Fax', serif
+    font-weight: 600

webui/src/primitives/Layout.tsx

@@ -0,0 +1,45 @@
+import React, {useCallback, useEffect, useMemo} from "react";
+import "./Layout.sass";
+
+interface TabsProps {
+  tabNames: string[]
+  index: number
+  onChange: (newIndex: number) => void
+  boldIndex?: number
+}
+
+export function Tabs({tabNames, index, onChange, boldIndex}: TabsProps) {
+  useEffect(() => {
+    if (index < 0) {
+      onChange(0);
+    } else if (tabNames.length > 0 && index >= tabNames.length) {
+      onChange(tabNames.length - 1);
+    }
+  }, [tabNames, index, onChange]);
+
+  const tabClass = useCallback((i: number) => {
+    const classes = ['Tabs-element'];
+
+    if (i === index) {
+      classes.push("Tabs-active");
+    }
+
+    if (i === boldIndex) {
+      classes.push("Tabs-bold");
+    }
+
+    return classes.join(" ");
+  }, [index, boldIndex])
+
+  return (
+    <div className="Tabs-container">
+      {tabNames.map((name, i) => (
+        <div className={tabClass(i)}
+             onClick={() => onChange(i)}
+        >
+          {name}
+        </div>
+      ))}
+    </div>
+  );
+}