- add delete for messages

resources/js/Pages/Messages/ConfirmDelete.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    message: {
+        type: Object,
+        required: true,
+    },
+});
+
+function confirmDelete() {
+    router.delete(`/dashboard/message/${props.message.id}/delete`);
+}
+</script>
+
+<template>
+    <InertiaHead title="Usuwanie wiadomości" />
+    <div class="p-4">
+        <header class="pb-4">
+            <h1 class="text-3xl font-roboto font-light">Usuwanie wiadomości</h1>
+        </header>
+        <div class="max-w-[600px]">
+            <p class="mb-4">Na pewno usunąć wiadomość od {{ message.sender }}?</p>
+            <div class="grid grid-cols-3 gap-2">
+                <InertiaLink
+                    as="button"
+                    :href="`/dashboard/message/${message.id}`"
+                    class="col-span-1 flex justify-center items-center gap-3 w-full px-2 py-1 border-t-4 border-b-4 border-transparent hover:border-b-black"
+                    ><FontAwesomeIcon :icon="['fas', 'backward']" />Anuluj</InertiaLink>
+                <button
+                    @click.prevent="confirmDelete"
+                    class="col-span-2 flex justify-center items-center gap-3 w-full px-2 py-1 rounded-md bg-red-600 border-4 border-red-600 text-white text-lg hover:bg-transparent hover:text-red-600"
+                    ><FontAwesomeIcon :icon="['fas', 'trash']" /><span class="whitespace-nowrap overflow-hidden overflow-ellipsis">Usuń wiadomość od {{ message.sender }}</span></button>
+            </div>
+        </div>
+    </div>
+</template>