File size: 2,352 Bytes
5367212 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<script lang="ts">
import Modal from "$lib/components/Modal.svelte";
import { onMount } from "svelte";
interface Props {
open?: boolean;
title?: string;
onclose?: () => void;
ondelete?: () => void;
}
let { open = false, title = "", onclose, ondelete }: Props = $props();
let deleteButtonEl: HTMLButtonElement | undefined = $state();
function close() {
open = false;
onclose?.();
}
function confirmDelete() {
ondelete?.();
close();
}
onMount(() => {
setTimeout(() => {
deleteButtonEl?.focus();
}, 100);
});
</script>
{#if open}
<Modal onclose={close} width="w-[90dvh] md:w-[480px]">
<div class="flex w-full flex-col gap-5 p-6">
<div class="flex items-start justify-between">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Delete conversation</h2>
<button type="button" class="group outline-none" onclick={close} aria-label="Close">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
class="size-5 text-gray-700 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-400"
><path
d="M24 9.41 22.59 8 16 14.59 9.41 8 8 9.41 14.59 16 8 22.59 9.41 24 16 17.41 22.59 24 24 22.59 17.41 16 24 9.41z"
fill="currentColor"
/></svg
>
</button>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">
Are you sure you want to delete "<span class="font-semibold">{title}</span>"? This action
cannot be undone.
</p>
<div class="flex items-center justify-end gap-2">
<button
type="button"
class="inline-flex items-center rounded-xl border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-900 shadow outline-none hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
onclick={close}
>
Cancel
</button>
<button
bind:this={deleteButtonEl}
type="button"
class="inline-flex items-center rounded-xl border border-red-600 bg-red-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 dark:border-red-500 dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-400 dark:focus:ring-offset-gray-800"
onclick={confirmDelete}
>
Delete
</button>
</div>
</div>
</Modal>
{/if}
|