AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-10-15 01:54:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Squash merge main into feature branch

Browse Source
This commit is contained in:
Aaron Po
2026-10-11 20:40:20 -04:00
parent bce8fb0472
commit 30ad304a11
70 changed files with 1623 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
web/frontend/app/features/theme/components/ThemeSwitcher.tsx
View File

@@ -1,12 +1,8 @@
import { useState } from 'react';
import { useRouteLoaderData } from 'react-router';
import type { loader as rootLoader } from '../../../root';
import { biergartenThemes, defaultThemeName, themeCookieName, type ThemeName } from '../themes';
const applyTheme = (theme: ThemeName) => {
document.documentElement.setAttribute('data-theme', theme);
document.cookie = `${themeCookieName}=${theme}; path=/; max-age=${60 * 60 * 24 * 365}; SameSite=Lax`;
};
import { biergartenThemes, defaultThemeName, type ThemeName } from '../themes';
import ThemeSegmentedControl from './ThemeSegmentedControl';
const ThemeSwitcher = () => {
const rootTheme = useRouteLoaderData<typeof rootLoader>('root')?.theme ?? defaultThemeName;
@@ -39,35 +35,7 @@ const ThemeSwitcher = () => {
<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>
<ThemeSegmentedControl onChange={setSelectedTheme} />
</div>
</section>
</>