Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<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>