Added ProfileMenu

Bit of refactoring
2026-06-15 16:20:03 +00:00 · 2024-05-19 11:48:00 +02:00
parent a61c8eead0
commit 3b72c843db
11 changed files with 206 additions and 108 deletions
@@ -0,0 +1,55 @@
+import {useTheme} from "next-themes";
+import React, {useLayoutEffect, useState} from "react";
+import {Switch} from "@nextui-org/react";
+import {Moon, SunDim} from "@phosphor-icons/react";
+import {themes} from "Frontend/theming/themes";
+import {Theme} from "Frontend/theming/theme";
+import ThemePreview from "Frontend/components/theming/ThemePreview";
+
+export function ThemeSelector() {
+
+    const {theme, setTheme} = useTheme();
+    const [isSelected, setIsSelected] = useState(theme ? theme.includes("light") : false);
+    const [currentTheme, setCurrentTheme] = useState(theme?.substring(0, theme?.lastIndexOf("-")));
+
+    useLayoutEffect(() => setTheme(`${currentTheme}-${mode()}`), [isSelected]);
+
+    function mode(): "light" | "dark" {
+        return isSelected ? "light" : "dark";
+    }
+
+    return (
+        <div className="flex flex-col size-full items-center">
+            <div className="w-full flex flex-row items-center justify-center gap-4 mb-16">
+                <Switch
+                    size="lg"
+                    startContent={<SunDim size={32}/>}
+                    endContent={<Moon size={32}/>}
+                    isSelected={isSelected}
+                    onValueChange={() => {
+                        setIsSelected(!isSelected);
+                    }}
+                />
+
+            </div>
+            <div className="grid grid-flow-col auto-cols-auto auto-cols-max-4 gap-8">
+                {
+                    //min-w-[468px]
+                    themes.map(((t: Theme) => (
+                        <div
+                            key={t.name}
+                            onClick={() => {
+                                setCurrentTheme(t.name);
+                                setTheme(`${t.name}-${mode()}`);
+                            }}>
+                            <ThemePreview
+                                theme={t}
+                                mode={mode()}
+                                isSelected={currentTheme === t.name}/>
+                        </div>
+                    )))
+                }
+            </div>
+        </div>
+    )
+}