used Modal in the delete project

Author: ArnabChatterjee20k

src/lib/components/confirm.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-    import { Button, InputCheckbox } from '$lib/elements/forms';
-    import { Layout } from '@appwrite.io/pink-svelte';
-    import { Modal } from '.';
+    import { Button, Form, InputCheckbox } from '$lib/elements/forms';
+    import { Alert, Dialog, Layout } from '@appwrite.io/pink-svelte';
+
     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;
@@ -22,34 +23,48 @@
     }
 </script>
 
-<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>
+<Form isModal {onSubmit}>
+    <Dialog {title} bind:open>
+        <Layout.Stack gap="xl">
+            {#if error}
+                <Alert.Inline
+                    dismissible
+                    status="error"
+                    on:dismiss={() => {
+                        error = null;
+                    }}>
+                    {error}
+                </Alert.Inline>
+            {/if}
 
-    <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>
+                {#if confirmDeletion}
+                    <InputCheckbox
+                        size="s"
+                        required
+                        id={checkboxId}
+                        bind:checked={confirm}
+                        label="I understand and confirm" />
+                {/if}
+            </Layout.Stack>
+        </Layout.Stack>
 
-    <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>
+        <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>
+    </Dialog>
+</Form>

src/routes/(console)/project-[region]-[project]/settings/deleteProject.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
+    import { Layout } from '@appwrite.io/pink-svelte';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { BoxAvatar, Confirm, CardGrid } from '$lib/components';
+    import { BoxAvatar, CardGrid } from '$lib/components';
     import { Button, InputText } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { addNotification } from '$lib/stores/notifications';
@@ -11,7 +12,7 @@
     import { project, projectRegion } from '../store';
     import { organization } from '$lib/stores/organization';
     import { Dependencies } from '$lib/constants';
-
+    import Modal from '$lib/components/modal.svelte';
     let error: string;
     let showDelete = false;
     let name: string = null;
@@ -62,21 +63,24 @@
     </svelte:fragment>
 </CardGrid>
 
-<Confirm
-    disabled={name !== $project.name}
-    onSubmit={handleDelete}
-    title="Delete project"
-    bind:open={showDelete}
-    bind:error>
-    <p>
-        <b>This project will be deleted</b>, along with all of its metadata, stats, and other
-        resources. <b>This action is irreversible</b>.
-    </p>
-    <InputText
-        label={`Enter "${$project.name}" to continue`}
-        placeholder="Enter name"
-        id="project-name"
-        autofocus
-        required
-        bind:value={name} />
-</Confirm>
+<Modal size="s" bind:show={showDelete} title="Delete project" onSubmit={handleDelete} bind:error>
+    <svelte:fragment slot="description">
+        This project will be deleted along with all of its metadata, stats, and other resources.
+        <b>This action is irreversible.</b>
+    </svelte:fragment>
+
+    <Layout.Stack gap="l">
+        <InputText
+            label={`Enter "${$project.name}" to continue`}
+            placeholder="Enter name"
+            id="project-name"
+            autofocus
+            required
+            bind:value={name} />
+    </Layout.Stack>
+
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button danger submit disabled={name !== $project.name}>Delete</Button>
+    </svelte:fragment>
+</Modal>