Initial commit0.1.0

1 files changed, 51 insertions, 0 deletions

diff --git a/frontend/src/lib/dialogs/ConfirmDeletion.svelte b/frontend/src/lib/dialogs/ConfirmDeletion.svelte
new file mode 100644
index 0000000..6b0cbf8
--- /dev/null
+++ b/frontend/src/lib/dialogs/ConfirmDeletion.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { accelerator } from '$lib/Shortcuts';
+	import Dialog from '$lib/components/Dialog.svelte';
+	import { closeModal } from 'svelte-modals';
+
+	export let isOpen: boolean;
+	export let callback: () => void;
+
+	export let names: string[];
+	export let typename: string;
+	export let warning: string | undefined = undefined;
+	const multiple = names.length > 1;
+	const formattedTypename = multiple ? `${typename}s` : typename;
+	const formattedNames = multiple ? `${names.length} ${formattedTypename}` : names[0];
+
+	function confirm() {
+		callback();
+		closeModal();
+	}
+</script>
+
+<Dialog {isOpen}>
+	<svelte:fragment slot="header">
+		<h2>Delete {formattedTypename}</h2>
+	</svelte:fragment>
+	<form on:submit|preventDefault={confirm}>
+		<div class="flex flex-col">
+			<p class="mb-3">
+				Are you sure you want to delete <span class="font-semibold">{formattedNames}</span>?
+			</p>
+			{#if multiple}
+				<ul class="mb-3 ml-8 list-disc">
+					{#each names.slice(0, 10) as name}
+						<li>{name}</li>
+					{/each}
+				</ul>
+				{#if names.length - 10 > 0}
+					<p>... and {names.length - 10} more.</p>
+				{/if}
+			{/if}
+			{#if warning}
+				<p class="font-medium text-red-600">Warning: {warning}</p>
+			{/if}
+		</div>
+
+		<div class="flex justify-end gap-4">
+			<button type="submit" class="btn-rose" use:accelerator={'Enter'}>Delete</button>
+			<button type="button" on:click={closeModal} class="btn-slate">Cancel</button>
+		</div>
+	</form>
+</Dialog>