theme provider

src/components/ThemeToggle/index.tsx

@@ -0,0 +1,39 @@
+import { DarkModeIcon, LightModeIcon } from "@/assets";
+import { useMapLayersStore } from "@/stores/useMapLayersStore";
+import { AnimatePresence, motion } from "framer-motion";
+import { useTheme } from "next-themes";
+
+export default function ThemeToggle() {
+    const { theme, setTheme } = useTheme();
+    const setActiveLayer = useMapLayersStore((s) => s.setActiveLayer);
+
+    function handleThemeToggle() {
+        if (theme === "dark") {
+            setActiveLayer("bright");
+            setTheme("light");
+        } else {
+            setActiveLayer("dark");
+            setTheme("dark");
+        }
+    }
+
+    return (
+        <AnimatePresence>
+            <button onClick={handleThemeToggle} className="flex cursor-pointer items-center py-2">
+                <motion.div
+                    key={theme}
+                    initial={{ rotate: -90, opacity: 0 }}
+                    animate={{ rotate: 0, opacity: 1 }}
+                    exit={{ rotate: 90, opacity: 0 }}
+                    transition={{ duration: 0.5, ease: "easeInOut" }}
+                >
+                    {theme === "dark" ? (
+                        <DarkModeIcon className="text-text size-6" />
+                    ) : (
+                        <LightModeIcon className="text-text size-6" />
+                    )}
+                </motion.div>
+            </button>
+        </AnimatePresence>
+    );
+}