From 15427a1bab3e1912235fb2ff0092e0f79c299b1f Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sat, 18 Oct 2025 23:53:36 +0000
Subject: [PATCH] Add ThemeToggle component for roadmap themes

cgen-5e08ffed76ef43c4b308dd2d73df0250
---
 client/components/roadmap/ThemeToggle.tsx | 45 +++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 client/components/roadmap/ThemeToggle.tsx

diff --git a/client/components/roadmap/ThemeToggle.tsx b/client/components/roadmap/ThemeToggle.tsx
new file mode 100644
index 00000000..4c117cf8
--- /dev/null
+++ b/client/components/roadmap/ThemeToggle.tsx
@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+export type RoadmapTheme = "space" | "fantasy" | "city" | "adventure";
+
+const key = "aethex_roadmap_theme_v1";
+
+export default function ThemeToggle({ value, onChange }: { value?: RoadmapTheme; onChange?: (v: RoadmapTheme) => void }) {
+  const [theme, setTheme] = useState<RoadmapTheme>(value || "space");
+
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem(key);
+      if (raw) {
+        const saved = JSON.parse(raw) as RoadmapTheme;
+        setTheme(saved);
+        onChange?.(saved);
+      }
+    } catch {}
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const set = (v: RoadmapTheme) => {
+    setTheme(v);
+    onChange?.(v);
+    try {
+      localStorage.setItem(key, JSON.stringify(v));
+    } catch {}
+  };
+
+  return (
+    <Tabs value={theme} onValueChange={(v) => set(v as RoadmapTheme)} className="w-full">
+      <TabsList className="grid w-full grid-cols-4">
+        <TabsTrigger value="space">Space</TabsTrigger>
+        <TabsTrigger value="fantasy">Fantasy</TabsTrigger>
+        <TabsTrigger value="city">City</TabsTrigger>
+        <TabsTrigger value="adventure">Adventure</TabsTrigger>
+      </TabsList>
+      <TabsContent value="space" />
+      <TabsContent value="fantasy" />
+      <TabsContent value="city" />
+      <TabsContent value="adventure" />
+    </Tabs>
+  );
+}