<script> import { createEventDispatcher } from 'svelte' import Input from "./Input.svelte"; import Button from "./Button.svelte"; const dispatch = createEventDispatcher() let snails = [{ name: '' }] function addSnail() { snails = [...snails, { name: '' }] } function onSave() { dispatch('save', { snails }) } </script> <div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true"> <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div> <div class="fixed inset-0 z-10 overflow-y-auto"> <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"> <div class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6"> <h2 class="mb-4 text-base font-semibold leading-6 text-gray-900">SNAILS</h2> <p class="mb-4">Snails are your friends, and help you make decisions</p> <div class="flex flex-col gap-y-2"> {#each snails as snail} <div class="item"> <Input type="text" bind:value={snail.name} /> </div> {/each} </div> <div class="mt-4 flex justify-between"> <Button on:click={addSnail}>Another One</Button> <Button on:click={onSave}>Save</Button> </div> </div> </div> </div> </div>