florian.wilde
675503e1f4
Chip-Auswahl im Gericht-Formular (Klick zum An-/Abwählen) statt Checkbox-Liste; Kürzel erscheinen hochgestellt neben dem Gerichtnamen in Speisekarte, mobiler Ansicht und Wochenplan-Editor. Editor bekommt außerdem einen Heute-Button.
43 lines
1.0 KiB
TypeScript
43 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import type { CodeItem } from "@/lib/types";
|
|
|
|
export default function ChipPicker({
|
|
items,
|
|
selected,
|
|
onToggle,
|
|
label,
|
|
}: {
|
|
items: CodeItem[];
|
|
selected: string[];
|
|
onToggle: (code: string) => void;
|
|
label: string;
|
|
}) {
|
|
return (
|
|
<div>
|
|
<label className="label">{label}</label>
|
|
{items.length === 0 ? (
|
|
<p className="text-sm text-gray-400">Keine Einträge vorhanden.</p>
|
|
) : (
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{items.map((item) => {
|
|
const active = selected.includes(item.code);
|
|
return (
|
|
<button
|
|
key={item.code}
|
|
type="button"
|
|
onClick={() => onToggle(item.code)}
|
|
className={`chip ${active ? "chip-active" : ""}`}
|
|
aria-pressed={active}
|
|
title={item.name}
|
|
>
|
|
<span className="font-semibold">{item.code}</span> {item.name}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|