blob: d30036930ce9714fcb7331c82cbf47d585de4bb2 (
plain) (
blame)
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 lang="ts">
import { trapFocus } from '$lib/Actions';
import { fadeDefault } from '$lib/Transitions';
import type { Snippet } from 'svelte';
import type { ModalProps } from 'svelte-modals';
import { fade } from 'svelte/transition';
interface Props extends ModalProps {
title: string;
children?: Snippet;
}
let { isOpen, close, title, children }: Props = $props();
</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">
<h2>{title}</h2>
<button
type="button"
class="ml-auto flex items-center text-white/30 hover:text-white"
title="Cancel"
aria-label="Cancel"
onclick={close}
>
<span class="icon-base icon-[material-symbols--close]"></span>
</button>
</header>
<main class="m-3 w-80 sm:w-[34rem]">
{@render children?.()}
</main>
</div>
</div>
{/if}
|
