chore: initial public commit

client/app/components/themeSwitcher/ThemeOption.tsx

@@ -0,0 +1,22 @@
+import type { Theme } from "~/providers/ThemeProvider";
+
+interface Props {
+    theme: Theme
+    setTheme: Function
+}
+
+export default function ThemeOption({ theme, setTheme }: Props) {
+
+    const capitalizeFirstLetter = (s: string) => {
+        return s.charAt(0).toUpperCase() + s.slice(1);
+    }
+
+    return (
+        <div onClick={() => setTheme(theme.name)} className="rounded-md p-5 hover:cursor-pointer flex gap-4 items-center border-2" style={{background: theme.bg, color: theme.fg, borderColor: theme.bgSecondary}}>
+            {capitalizeFirstLetter(theme.name)}
+            <div className="w-[50px] h-[30px] rounded-md" style={{background: theme.bgSecondary}}></div>
+            <div className="w-[50px] h-[30px] rounded-md" style={{background: theme.fgSecondary}}></div>
+            <div className="w-[50px] h-[30px] rounded-md" style={{background: theme.primary}}></div>
+        </div>
+    )
+}

client/app/components/themeSwitcher/ThemeSwitcher.tsx

@@ -0,0 +1,36 @@
+// ThemeSwitcher.tsx
+import { useEffect } from 'react';
+import { useTheme } from '../../hooks/useTheme';
+import { themes } from '~/providers/ThemeProvider';
+import ThemeOption from './ThemeOption';
+
+export function ThemeSwitcher() {
+    const { theme, setTheme } = useTheme();
+
+
+    useEffect(() => {
+        const saved = localStorage.getItem('theme');
+        if (saved && saved !== theme) {
+            setTheme(saved);
+        } else if (!saved) {
+            localStorage.setItem('theme', theme)
+        }
+    }, []);
+
+    useEffect(() => {
+        if (theme) {
+            localStorage.setItem('theme', theme)
+        }
+    }, [theme]);
+
+    return (
+        <>
+        <h2>Select Theme</h2>
+        <div className="grid grid-cols-2 items-center gap-2">
+            {themes.map((t) => (
+                <ThemeOption setTheme={setTheme} key={t.name} theme={t} />
+            ))}
+        </div>
+        </>
+    );
+}