bretton.dev
Coves frontend - a photon fork
1<script lang="ts">
2 import { Button, Modal } from 'mono-svelte'
3 import { Icon } from 'svelte-hero-icons/dist'
4 import { shownModal } from './modal'
5
6 let isOpen = $derived(!!$shownModal)
7</script>
8
9{#if $shownModal}
10 <Modal
11 title={$shownModal.title}
12 dismissable={$shownModal.dismissable}
13 ondismissed={() => shownModal.set(undefined)}
14 open={isOpen}
15 >
16 {#if $shownModal.snippet}
17 {@render $shownModal.snippet?.()}
18 {/if}
19 {#if $shownModal.body}
20 <p>{$shownModal.body}</p>
21 {/if}
22 {#if $shownModal.actions}
23 <div
24 class="flex items-center gap-2 {$shownModal.actions.length >= 3
25 ? 'flex-col'
26 : 'flex-row'}"
27 >
28 {#each $shownModal.actions as action (action)}
29 <Button
30 size="lg"
31 class="flex-1 w-full"
32 onclick={action.action}
33 color={action.type}
34 >
35 {#if action.icon}
36 <Icon src={action.icon} mini size="16" />
37 {/if}
38 {action.content}
39 </Button>
40 {/each}
41 </div>
42 {/if}
43 </Modal>
44{/if}