diff options
| author | Wolfgang Müller | 2024-03-05 18:08:09 +0100 |
|---|---|---|
| committer | Wolfgang Müller | 2024-03-05 19:25:59 +0100 |
| commit | d1d654ebac2d51e3841675faeb56480e440f622f (patch) | |
| tree | 56ef123c1a15a10dfd90836e4038e27efde950c6 /frontend/src/lib/components/Dialog.svelte | |
| download | hircine-0.1.0.tar.gz | |
Initial commit0.1.0
Diffstat (limited to 'frontend/src/lib/components/Dialog.svelte')
| -rw-r--r-- | frontend/src/lib/components/Dialog.svelte | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/frontend/src/lib/components/Dialog.svelte b/frontend/src/lib/components/Dialog.svelte new file mode 100644 index 0000000..a0bbe5e --- /dev/null +++ b/frontend/src/lib/components/Dialog.svelte @@ -0,0 +1,36 @@ +<script lang="ts"> + import { trapFocus } from '$lib/Actions'; + import { fadeDefault } from '$lib/Transitions'; + import { closeModal } from 'svelte-modals'; + import { fade } from 'svelte/transition'; + + export let isOpen: boolean; +</script> + +{#if isOpen} + <div + role="dialog" + class="pointer-events-none fixed bottom-0 left-0 right-0 top-0 z-30 flex items-center justify-center" + transition:fade|global={fadeDefault} + use:trapFocus + > + <div + class="pointer-events-auto flex flex-col rounded-md bg-slate-800 shadow-md shadow-slate-900" + > + <header class="flex items-center gap-1 border-b-2 border-slate-700/50 p-2"> + <slot name="header" /> + <button + type="button" + class="ml-auto flex items-center text-white/30 hover:text-white" + title="Cancel" + on:click={closeModal} + > + <span class="icon-base icon-[material-symbols--close]" /> + </button> + </header> + <main class="m-3 w-80 sm:w-[34rem]"> + <slot /> + </main> + </div> + </div> +{/if} |