feat: apply Popover in MainLayout for theme configure

packages/react/src/MainLayout.tsx

@@ -1,24 +1,26 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Link, Outlet, useLocation } from "react-router-dom";
 import { Button } from "../components/Button";
 import RouteObject from "./RouteObject";
 import { Toaster } from "@components/Toast";
+import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
 
-type Theme = "light" | "dark";
+type Theme = "light" | "dark" | "system";
 
 function ThemeButton() {
-  const [theme, _setTheme] = useState<Theme>("light");
-  function setTheme(t: Theme) {
-    _setTheme(t);
-    document.documentElement.classList.toggle("dark", t === "dark");
-  }
+  const [theme, setTheme] = useState<Theme>(
+    (localStorage.getItem("theme") as Theme) || "system"
+  );
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", theme === "dark");
+    document.documentElement.classList.toggle("system", theme === "system");
+    localStorage.setItem("theme", theme);
+  }, [theme]);
 
   return (
-    <Button
-      preset="ghost"
-      size="icon"
-      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-    >
+    <Popover>
+      <PopoverTrigger>
+        <Button preset="ghost" size="icon">
           {/* material-symbols:light-mode */}
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -46,6 +48,31 @@ function ThemeButton() {
             />
           </svg>
         </Button>
+      </PopoverTrigger>
+      <PopoverContent anchor="bottomLeft" className="w-32">
+        <Button
+          preset="ghost"
+          onClick={() => setTheme("light")}
+          className="w-full px-2 py-1.5 text-sm"
+        >
+          Light
+        </Button>
+        <Button
+          preset="ghost"
+          onClick={() => setTheme("dark")}
+          className="w-full px-2 py-1.5 text-sm"
+        >
+          Dark
+        </Button>
+        <Button
+          preset="ghost"
+          onClick={() => setTheme("system")}
+          className="w-full px-2 py-1.5 text-sm"
+        >
+          System
+        </Button>
+      </PopoverContent>
+    </Popover>
   );
 }