2a43b59947
- show drink price and Pfand separately on tiles and in cart - add light/dark toggle on the bar-picker page (persisted) - theme via CSS variables, applied on load for tablet + admin - larger, bolder text throughout; much bigger total sum
36 lines
883 B
TypeScript
36 lines
883 B
TypeScript
import { useState } from 'preact/hooks';
|
|
import type { Bar } from '@wutzcalc/shared';
|
|
import { getTheme, setTheme } from '../api';
|
|
|
|
interface Props {
|
|
bars: Bar[] | null;
|
|
onPick: (id: number) => void;
|
|
}
|
|
|
|
export function BarPicker({ bars, onPick }: Props) {
|
|
const [theme, setThemeState] = useState(getTheme());
|
|
|
|
function toggleTheme() {
|
|
const next = theme === 'dark' ? 'light' : 'dark';
|
|
setTheme(next);
|
|
setThemeState(next);
|
|
}
|
|
|
|
return (
|
|
<div class="bar-picker">
|
|
<h1>Bar auswählen</h1>
|
|
{bars == null ? (
|
|
<p>Lade…</p>
|
|
) : (
|
|
bars.map(b => (
|
|
<button key={b.id} onClick={() => onPick(b.id)}>
|
|
{b.name}
|
|
</button>
|
|
))
|
|
)}
|
|
<button class="theme-toggle" onClick={toggleTheme}>
|
|
{theme === 'dark' ? '☀ Heller Modus' : '🌙 Dunkler Modus'}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|