WIP

src/ui/components/reusable/Tab.css

@@ -0,0 +1,21 @@
+.tab {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  height: 38px;
+  background: var(--color-tab);
+  min-width: 4rem;
+}
+
+.tab:hover {
+  background: var(--color-tab-light);
+}
+
+.tab--active {
+  background: var(--color-bg-block);
+  color: var(--color-text);
+  cursor: default;
+}
+
+.tab--active:hover {
+  background: var(--color-bg-block);
+}

src/ui/components/reusable/Tab.tsx

@@ -0,0 +1,20 @@
+import { Component } from "solid-js";
+import "./Tab.css";
+import { TabName } from "../../../state";
+
+const Tab: Component<{
+  name: TabName;
+  setTab: (name: TabName) => void;
+  isActive: boolean;
+}> = (props) => {
+  return (
+    <button
+      class={"tab" + (props.isActive ? " tab--active" : "")}
+      onClick={() => props.setTab(props.name)}
+    >
+      {props.children}
+    </button>
+  );
+};
+
+export default Tab;