Added ProfileMenu

Bit of refactoring

frontend/components/ProfileMenu.tsx

@@ -1,15 +1,17 @@
 import {useAuth} from "Frontend/util/auth";
 import {GearFine, Question, SignOut, User} from "@phosphor-icons/react";
 import {Avatar, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger} from "@nextui-org/react";
+import {useNavigate} from "react-router-dom";
 
 export default function ProfileMenu() {
     const {state, logout} = useAuth();
+    const navigate = useNavigate();
 
     const profileMenuItems = [
         {
             label: "My Profile",
             icon: <User/>,
-            onClick: () => alert("Profile")
+            onClick: () => navigate('/profile')
         },
         {
             label: "Administration",
@@ -26,7 +28,7 @@ export default function ProfileMenu() {
             label: "Sign Out",
             icon: <SignOut/>,
             onClick: () => logout(),
-            color: "danger"
+            color: "primary"
         },
     ];
 
@@ -38,7 +40,7 @@ export default function ProfileMenu() {
                         as="button"
                         className="transition-transform size-8"
                         classNames={{
-                            base: "bg-gradient-to-br from-primary-400 to-primary-700",
+                            base: "gradient-primary",
                             icon: "text-background/80"
                         }}
                 />

frontend/components/theming/ThemeSelector.tsx

@@ -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>
+    )
+}