+ alerts

src/components/ConfirmDialog.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+const props = defineProps({
+  message: { type: String, required: true },
+  callback: { type: Function, required: true },
+})
+
+const handleConfirm = (result: boolean) => {
+  props.callback(result);
+}
+</script>
+
+<template>
+  <div class="fixed inset-0 z-[1000] flex items-center justify-center  p-4 bg-black/50 !bg-opacity-10!">
+    <div class="bg-white rounded-2xl shadow-xl max-w-sm w-full p-6 flex-col gap-5">
+      <!-- Сообщение -->
+      <div class="text-center mb-6">
+        <span class="text-lg font-semibold text-gray-900">
+          {{ message }}
+        </span>
+      </div>
+
+      <!-- Кнопки -->
+      <div class="flex gap-3">
+        <button
+            @click="handleConfirm(false)"
+            class="flex-1 py-3 px-4 border border-gray-300 rounded-xl text-gray-700 font-medium hover:bg-gray-50 active:bg-gray-100 transition-colors"
+        >
+          Cancel
+        </button>
+        <button
+            @click="handleConfirm(true)"
+            class="flex-1 py-3 px-4 bg-blue-500 text-white rounded-xl font-medium hover:bg-blue-600 active:bg-blue-700 transition-colors"
+        >
+          OK
+        </button>
+      </div>
+    </div>
+  </div>
+</template>