30 lines
1002 B
Svelte
30 lines
1002 B
Svelte
<script>
|
|
import BouquetFlowerCard from './BouquetFlowerCard.svelte';
|
|
|
|
/** @type {{ id: number, name: string, nameKo: string, wordOfFlower: string, wordOfFlowerKo: string, imageSrc: string, role?: 'main' | 'sub' | 'greenery' }[]} */
|
|
let { flowers = [] } = $props();
|
|
</script>
|
|
|
|
{#if flowers.length === 0}
|
|
<p class="text-sm text-muted">Flower details will appear once the bouquet recipe is ready.</p>
|
|
{:else}
|
|
<div class="min-h-0 w-full">
|
|
<p class="mb-4 text-xs tracking-[0.2em] text-muted uppercase">Flowers in your bouquet</p>
|
|
|
|
<div
|
|
class="flex snap-x snap-mandatory [scrollbar-width:none] gap-4 overflow-x-auto px-0.5 py-1 [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
|
|
>
|
|
{#each flowers as flower (flower.id)}
|
|
<BouquetFlowerCard
|
|
name={flower.name}
|
|
nameKo={flower.nameKo}
|
|
wordOfFlower={flower.wordOfFlower}
|
|
wordOfFlowerKo={flower.wordOfFlowerKo}
|
|
imageSrc={flower.imageSrc}
|
|
role={flower.role ?? 'main'}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|