adding monkeytype

frontend/storybook/stories/AnimeSwitch.stories.tsx

@@ -0,0 +1,77 @@
+import preview from "#.storybook/preview";
+import { Component, createSignal } from "solid-js";
+
+import { AnimeMatch } from "../../src/ts/components/common/anime/AnimeMatch";
+import { AnimeSwitch } from "../../src/ts/components/common/anime/AnimeSwitch";
+
+const meta = preview.meta({
+  title: "Common/Anime/AnimeSwitch",
+  component: AnimeSwitch as Component,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+});
+
+export const Default = meta.story({
+  render: () => {
+    const [tab, setTab] = createSignal<"a" | "b" | "c">("a");
+    const buttonStyle = (active: boolean) => ({
+      padding: "8px 16px",
+      cursor: "pointer",
+      "background-color": active ? "var(--main-color)" : "var(--sub-alt-color)",
+      color: active ? "var(--bg-color)" : "var(--text-color)",
+      border: "none",
+      "border-radius": "8px",
+    });
+
+    return (
+      <div>
+        <div style={{ display: "flex", gap: "8px", "margin-bottom": "16px" }}>
+          <button
+            style={buttonStyle(tab() === "a")}
+            onClick={() => setTab("a")}
+          >
+            Tab A
+          </button>
+          <button
+            style={buttonStyle(tab() === "b")}
+            onClick={() => setTab("b")}
+          >
+            Tab B
+          </button>
+          <button
+            style={buttonStyle(tab() === "c")}
+            onClick={() => setTab("c")}
+          >
+            Tab C
+          </button>
+        </div>
+        <AnimeSwitch
+          exitBeforeEnter
+          animeProps={{
+            initial: { opacity: 0 },
+            animate: { opacity: 1, duration: 200 },
+            exit: { opacity: 0, duration: 200 },
+          }}
+        >
+          <AnimeMatch when={tab() === "a"}>
+            <div style={{ color: "var(--text-color)", padding: "16px" }}>
+              Content for Tab A
+            </div>
+          </AnimeMatch>
+          <AnimeMatch when={tab() === "b"}>
+            <div style={{ color: "var(--text-color)", padding: "16px" }}>
+              Content for Tab B
+            </div>
+          </AnimeMatch>
+          <AnimeMatch when={tab() === "c"}>
+            <div style={{ color: "var(--text-color)", padding: "16px" }}>
+              Content for Tab C
+            </div>
+          </AnimeMatch>
+        </AnimeSwitch>
+      </div>
+    );
+  },
+});