From 7a7d917a55259dd9a3bef8ed7bb01e700a3abf62 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Mon, 4 Sep 2023 18:13:31 -0300
Subject: [PATCH] Add gallery slider component

---
 .../Gallery/GallerySlider/GallerySlider.vue   | 77 +++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 src/components/Gallery/GallerySlider/GallerySlider.vue

diff --git a/src/components/Gallery/GallerySlider/GallerySlider.vue b/src/components/Gallery/GallerySlider/GallerySlider.vue
new file mode 100644
index 0000000..7132ba8
--- /dev/null
+++ b/src/components/Gallery/GallerySlider/GallerySlider.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="overflow-hidden h-[550px] w-full">
+    <img
+      class="object-cover overflow-hidden h-[550px] w-full absolute"
+      :key="currentDepiction.src"
+      :src="currentDepiction.src"
+      alt="Dichroplus maculipennis"
+    />
+    <div class="bg-black bg-opacity-25 absolute h-full w-full top-0"></div>
+    <div class="absolute bottom-2 right-4">
+      <span class="z-10 text-white text-sm drop-shadow">
+        <RouterLink
+          v-if="currentDepiction.otuId"
+          class="text-white"
+          :to="{ name: 'otus-id', params: { id: currentDepiction.otuId } }"
+        >
+          {{ currentDepiction.label }} © {{ currentDepiction.copyright }}
+        </RouterLink>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, computed, onBeforeUnmount } from 'vue'
+import { makeAPIRequest } from '@/utils'
+
+const props = defineProps({
+  depictionId: {
+    type: Array,
+    default: () => []
+  },
+
+  interval: {
+    type: Number,
+    default: 5000
+  }
+})
+
+const depictions = ref([])
+const currentIndex = ref(0)
+const currentDepiction = computed(() => depictions[currentIndex.value] || {})
+let timeout = null
+
+function updateIndex() {
+  currentIndex.value = Math.round(Math.random() * depictions.length)
+}
+
+onMounted(() => {
+  makeAPIRequest.get(`/url`).then(({ data }) => {
+    depictions.value = data
+
+    timeout = setInterval(updateIndex, props.interval)
+  })
+})
+
+onBeforeUnmount(() => {
+  clearInterval(timeout)
+})
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 1s ease-in-out;
+}
+.fade-enter-from {
+  opacity: 0;
+}
+.fade-enter-to {
+  opacity: 1;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>