✨ Implement duplication and deletion of timetables

src/components/settings/timetable-card.vue

@@ -1,14 +1,24 @@
 <script setup>
+import { ref, watch } from "vue";
 import {
   CircleIcon,
   CheckCircleIcon,
   Edit2Icon,
   TrashIcon,
+  AlertCircleIcon,
   CopyIcon,
 } from "lucide-vue-next";
 
 defineProps(["timetable", "editable", "selected"]);
 defineEmits(["click", "edit", "delete", "copy"]);
+
+const deleteConfirm = ref(false);
+
+watch(deleteConfirm, (value) => {
+  if (value) {
+    setTimeout(() => (deleteConfirm.value = false), 2000);
+  }
+});
 </script>
 
 <template>
@@ -27,8 +37,16 @@ defineEmits(["click", "edit", "delete", "copy"]);
 
     <div class="buttons">
       <Edit2Icon v-if="editable" @click="$emit('edit')" />
-      <TrashIcon v-if="editable" @click="$emit('delete')" />
-      <CopyIcon v-if="!editable" @click="$emit('copy')" />
+      <CopyIcon @click="$emit('copy')" />
+      <TrashIcon
+        v-if="editable && !deleteConfirm"
+        @click="deleteConfirm = true"
+      />
+      <AlertCircleIcon
+        v-if="editable && deleteConfirm"
+        color="red"
+        @click="$emit('delete')"
+      />
     </div>
   </div>
 </template>