diff --git a/app/globals.css b/app/globals.css index 4139480..f378cda 100644 --- a/app/globals.css +++ b/app/globals.css @@ -108,3 +108,31 @@ body { color: #4b5563; margin-left: 0.15rem; } + +/* ---------- Chip-Auswahl (Allergene/Zusatzstoffe je Gericht) ---------- */ +.chip { + display: inline-flex; + align-items: center; + gap: 0.25rem; + border-radius: 9999px; + padding: 0.2rem 0.65rem; + font-size: 0.75rem; + line-height: 1.2; + border: 1px solid #d1d5db; + background: #f9fafb; + color: #374151; + cursor: pointer; + transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; +} +.chip:hover { border-color: var(--c-primary); } +.chip-active { + background: var(--c-primary); + border-color: var(--c-primary); + color: #ffffff; +} +.dish-codes { + font-size: 0.65rem; + color: #6b7280; + vertical-align: super; + margin-left: 0.15rem; +} diff --git a/components/ChipPicker.tsx b/components/ChipPicker.tsx new file mode 100644 index 0000000..8241854 --- /dev/null +++ b/components/ChipPicker.tsx @@ -0,0 +1,42 @@ +"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 ( +
Keine Einträge vorhanden.
+ ) : ( +