Refactor authentication and account management with modular UI components (#242)

web/frontend/app/features/theme/components/ThemeSwitcher.tsx

@@ -0,0 +1,87 @@
+import { useState } from 'react';
+import {
+    biergartenThemes,
+    defaultThemeName,
+    isBiergartenTheme,
+    type ThemeName,
+    themeStorageKey,
+} from '../themes';
+
+const applyTheme = (theme: ThemeName) => {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem(themeStorageKey, theme);
+};
+
+const ThemeSwitcher = () => {
+    const [selectedTheme, setSelectedTheme] = useState<ThemeName>(() => {
+        if (typeof window === 'undefined') {
+            return defaultThemeName;
+        }
+
+        const savedTheme = localStorage.getItem(themeStorageKey);
+        return isBiergartenTheme(savedTheme) ? savedTheme : defaultThemeName;
+    });
+
+    const activeTheme =
+        biergartenThemes.find((theme) => theme.value === selectedTheme) ?? biergartenThemes[0];
+
+    return (
+        <>
+            <section className="card border border-base-300 bg-base-100 shadow-xl">
+                <div className="card-body gap-4">
+                    <h1 className="card-title text-3xl sm:text-4xl">Theme Guide</h1>
+                    <p className="text-base-content/70">
+                        Four themes, four moods — from the sun-bleached clarity of a Weizen
+                        afternoon to the deep berry dark of a Cassis barrel. Every theme shares the
+                        same semantic token structure so components stay consistent while the
+                        atmosphere shifts completely.
+                    </p>
+                    <div className="alert alert-info alert-soft">
+                        <span>
+                            Active theme: <strong>{activeTheme.label}</strong> — {activeTheme.vibe}
+                        </span>
+                    </div>
+                </div>
+            </section>
+
+            <section className="card border border-base-300 bg-base-100 shadow-xl">
+                <div className="card-body gap-4">
+                    <h2 className="card-title text-2xl">Theme switcher</h2>
+                    <p className="text-base-content/70">Pick a theme and preview it immediately.</p>
+
+                    <div
+                        className="join join-vertical sm:join-horizontal"
+                        role="radiogroup"
+                        aria-label="Theme selector"
+                    >
+                        {biergartenThemes.map((theme) => {
+                            const checked = selectedTheme === theme.value;
+
+                            return (
+                                <label
+                                    key={theme.value}
+                                    className={`btn join-item ${checked ? 'btn-primary' : 'btn-outline'}`}
+                                >
+                                    <input
+                                        type="radio"
+                                        name="theme"
+                                        value={theme.value}
+                                        className="sr-only"
+                                        checked={checked}
+                                        onChange={() => {
+                                            setSelectedTheme(theme.value);
+                                            applyTheme(theme.value);
+                                        }}
+                                    />
+                                    {theme.label}
+                                </label>
+                            );
+                        })}
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+};
+
+export default ThemeSwitcher;