initial commit

frontend/src/lib/components/confirm-dialog/confirm-dialog.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import { confirmDialogStore } from '.';
+	import Button from '../ui/button/button.svelte';
+</script>
+
+<AlertDialog.Root bind:open={$confirmDialogStore.open}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>{$confirmDialogStore.title}</AlertDialog.Title>
+			<AlertDialog.Description>
+				{$confirmDialogStore.message}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+			<AlertDialog.Action asChild>
+				<Button
+					variant={$confirmDialogStore.confirm.destructive ? 'destructive' : 'default'}
+					on:click={() => {
+						$confirmDialogStore.confirm.action();
+						$confirmDialogStore.open = false;
+					}}
+				>
+					{$confirmDialogStore.confirm.label}
+				</Button>
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

frontend/src/lib/components/confirm-dialog/index.ts

@@ -0,0 +1,39 @@
+import { writable } from 'svelte/store';
+import ConfirmDialog from './confirm-dialog.svelte';
+
+export const confirmDialogStore = writable({
+	open: false,
+	title: '',
+	message: '',
+	confirm: {
+		label: 'Confirm',
+		destructive: false,
+		action: () => {}
+	}
+});
+
+function openConfirmDialog({
+	title,
+	message,
+	confirm
+}: {
+	title: string;
+	message: string;
+	confirm: {
+		label?: string;
+		destructive?: boolean;
+		action: () => void;
+	};
+}) {
+	confirmDialogStore.update((val) => ({
+		open: true,
+		title,
+		message,
+		confirm: {
+			...val.confirm,
+			...confirm
+		}
+	}));
+}
+
+export { ConfirmDialog, openConfirmDialog };