From 781ed9d1baeca23036bb35821883b614a263d8eb Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Mon, 19 Sep 2022 21:32:35 -0800
Subject: [PATCH] implement generic drop zone

---
 frontend/components/global/DropZone.vue | 31 +++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 frontend/components/global/DropZone.vue

diff --git a/frontend/components/global/DropZone.vue b/frontend/components/global/DropZone.vue
new file mode 100644
index 0000000..786a077
--- /dev/null
+++ b/frontend/components/global/DropZone.vue
@@ -0,0 +1,31 @@
+<template>
+  <div
+    ref="el"
+    class="h-24 w-full border-2 border-primary border-dashed grid place-content-center"
+    :class="isOverDropZone ? 'bg-primary bg-opacity-10' : ''"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  defineProps({
+    modelValue: {
+      type: Boolean,
+      required: false,
+    },
+  });
+
+  const emit = defineEmits(["update:modelValue", "drop"]);
+
+  const el = ref<HTMLDivElement>(null);
+  const { isOverDropZone } = useDropZone(el, files => {
+    emit("drop", files);
+  });
+
+  watch(isOverDropZone, () => {
+    emit("update:modelValue", isOverDropZone.value);
+  });
+</script>
+
+<style scoped></style>