From 864517d0ba1ecdf50c2be326b187ff7d7a106f72 Mon Sep 17 00:00:00 2001
From: Eric <eric.emj.johnson@gmail.com>
Date: Thu, 25 Jan 2024 16:44:00 -0800
Subject: [PATCH] widgets: added slide to confirm component

---
 src/components/SlideToConfirm.vue | 41 +++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/components/SlideToConfirm.vue

diff --git a/src/components/SlideToConfirm.vue b/src/components/SlideToConfirm.vue
new file mode 100644
index 000000000..232cdbbe6
--- /dev/null
+++ b/src/components/SlideToConfirm.vue
@@ -0,0 +1,41 @@
+<template>
+  <div v-if="showSlideToConfirm">
+    <div class="flex items-center space-x-4 mb-3">
+      <slide-unlock
+        ref="vueslideunlock"
+        :auto-width="false"
+        :circle="true"
+        :disabled="false"
+        :noanimate="false"
+        :width="400"
+        :height="50"
+        text="slide to confirm"
+        success-text="action confirmed"
+        name="slideunlock"
+        class="slide-unlock"
+        @completed="onSlideConfirmed()"
+      />
+      <button class="w-12 h-12 flex items-center justify-center rounded-full bg-white text-gray" @click="cancelAction">
+        X
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SlideUnlock from 'vue-slide-unlock'
+
+import { confirmed, showSlideToConfirm } from '@/libs/slide-to-confirm'
+
+const onSlideConfirmed = (): void => {
+  showSlideToConfirm.value = false
+  confirmed.value = true
+  console.log('Slide confirmed!')
+}
+
+const cancelAction = (): void => {
+  showSlideToConfirm.value = false
+  confirmed.value = false
+  console.log('Slide canceled!')
+}
+</script>