use console version of the Modal

Author: ArnabChatterjee20k

src/lib/components/confirm.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-    import { Button, Form, InputCheckbox } from '$lib/elements/forms';
-    import { Alert, Layout, Modal } from '@appwrite.io/pink-svelte';
-
+    import { Button, InputCheckbox } from '$lib/elements/forms';
+    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Modal } from '.';
     export let open: boolean;
     export let title: string;
     export let error: string = null;
     export let action: string = 'Delete';
-    export let canDelete: boolean = true;
     export let disabled: boolean = false;
     export let submissionLoader = false;
     export let confirmDeletion: boolean = false;
@@ -23,48 +22,34 @@
     }
 </script>
 
-<Form isModal {onSubmit}>
-    <Modal bind:open {title} size="s">
-        <Layout.Stack gap="xl">
-            {#if error}
-                <Alert.Inline
-                    dismissible
-                    status="error"
-                    on:dismiss={() => {
-                        error = null;
-                    }}>
-                    {error}
-                </Alert.Inline>
-            {/if}
+<Modal size="s" bind:show={open} {title} {onSubmit} bind:error>
+    <svelte:fragment slot="description">
+        {#if confirmDeletion}
+            This action is irreversible. Please confirm to proceed.
+        {/if}
+    </svelte:fragment>
 
-            <Layout.Stack gap="l">
-                <slot />
+    <Layout.Stack gap="l">
+        <slot />
 
-                {#if confirmDeletion}
-                    <InputCheckbox
-                        size="s"
-                        required
-                        id={checkboxId}
-                        bind:checked={confirm}
-                        label="I understand and confirm" />
-                {/if}
-            </Layout.Stack>
-        </Layout.Stack>
+        {#if confirmDeletion}
+            <InputCheckbox
+                size="s"
+                required
+                id={checkboxId}
+                bind:checked={confirm}
+                label="I understand and confirm" />
+        {/if}
+    </Layout.Stack>
 
-        <svelte:fragment slot="footer">
-            <Layout.Stack direction="row" gap="s" justifyContent="flex-end">
-                <slot name="footer">
-                    <Button text on:click={() => (open = false)}>Cancel</Button>
-                    {#if canDelete}
-                        <Button
-                            danger
-                            submit
-                            {submissionLoader}
-                            disabled={disabled || (confirmDeletion ? !confirm : false)}
-                            >{action}</Button>
-                    {/if}
-                </slot>
-            </Layout.Stack>
-        </svelte:fragment>
-    </Modal>
-</Form>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (open = false)}>Cancel</Button>
+        <Button
+            danger
+            submit
+            {submissionLoader}
+            disabled={disabled || (confirmDeletion ? !confirm : false)}>
+            {action}
+        </Button>
+    </svelte:fragment>
+</Modal>