path: root/frontend/src/lib/components/Dialog.svelte

<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}