27 lines
717 B
Svelte
27 lines
717 B
Svelte
<script lang="ts">
|
|
import StapleChip from './StapleChip.svelte';
|
|
|
|
type Ingredient = { id: string; name: string; isStaple: boolean };
|
|
|
|
let { name, ingredients, onToggle }: {
|
|
name: string;
|
|
ingredients: Ingredient[];
|
|
onToggle: (id: string, value: boolean) => void;
|
|
} = $props();
|
|
</script>
|
|
|
|
<div>
|
|
<p class="text-[10px] font-medium tracking-[.08em] uppercase text-[var(--color-text-muted)] mb-[8px]">
|
|
{name}
|
|
</p>
|
|
<div class="flex flex-wrap gap-[6px]">
|
|
{#each ingredients as ingredient (ingredient.id)}
|
|
<StapleChip
|
|
name={ingredient.name}
|
|
selected={ingredient.isStaple}
|
|
onToggle={(value) => onToggle(ingredient.id, value)}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
</div>
|