Initial commit0.1.0

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}