32 lines
763 B
Svelte
32 lines
763 B
Svelte
<script>
|
|
import { XIcon } from 'lucide-svelte';
|
|
import { fade } from 'svelte/transition';
|
|
|
|
let { isOpen, onClose, children, heading = 'Modal' } = $props();
|
|
</script>
|
|
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
transition:fade={{ duration: 200 }}
|
|
class="fixed inset-0 bg-black/50 flex justify-center items-center"
|
|
onclick={(e) => {
|
|
if (e.target === e.currentTarget) {
|
|
onClose();
|
|
}
|
|
}}
|
|
>
|
|
<div class="bg-neutral-200 rounded-lg text-black shadow-md min-w-xl">
|
|
{#if heading}
|
|
<div class="p-4 flex justify-between items-center border-b border-neutral-400">
|
|
<h2 class="text-lg font-bold">{heading}</h2>
|
|
<XIcon class="size-6 cursor-pointer" onclick={onClose} />
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="p-4">
|
|
{@render children()}
|
|
</div>
|
|
</div>
|
|
</div>
|