From 07ba850f96612b53aca77aeccc6a07e0c72a20ea Mon Sep 17 00:00:00 2001
From: Ina <inamar@stud.ntnu.no>
Date: Wed, 1 May 2024 09:33:17 +0200
Subject: [PATCH] refactor: add spareComponent
---
src/components/SpareComponent.vue | 73 +++++++++++++++++++++++++++++++
1 file changed, 73 insertions(+)
create mode 100644 src/components/SpareComponent.vue
diff --git a/src/components/SpareComponent.vue b/src/components/SpareComponent.vue
new file mode 100644
index 0000000..ffccfd1
--- /dev/null
+++ b/src/components/SpareComponent.vue
@@ -0,0 +1,73 @@
+<template>
+ <div>
+ <!-- This image shows only if new speech is available -->
+ <img
+ v-if="notification"
+ alt="Varsel"
+ class="jump scale-x-[-1] w-1/12 h-1/12 ml-52 cursor-pointer z-10"
+ src="@/assets/varsel.png"
+ />
+
+ <!-- This is the clickable image that will trigger the modal to open -->
+ <div class="flex items-center"
+ :class="{
+ 'flex-row': imageDirection === 'right',
+ 'flex-row-reverse': imageDirection === 'left'
+ }">
+ <a @click="handleSpareClick" class="hover:bg-transparent z-20">
+ <img
+ alt="Spare"
+ class="md:h-5/6 md:w-5/6 w-2/3 h-2/3 cursor-pointer ml-14 md:ml-10"
+ src="@/assets/spare.png"
+ />
+ </a>
+ </div>
+
+ <!-- InteractiveSpare modal component -->
+ <InteractiveSpare
+ :isModalOpen="isModalOpen"
+ :speech="speech"
+ :png-size="pngSize"
+ :direction="direction"
+ :notification="notification"
+ ></InteractiveSpare>
+ </div>
+</template>
+
+<script setup lang="ts">
+import InteractiveSpare from "@/components/InteractiveSpare.vue"
+import {defineProps, ref} from "vue"
+
+const isModalOpen = ref(false)
+
+defineProps([
+ 'speech',
+ 'pngSize',
+ 'direction',
+ 'imageDirection',
+ 'notification'
+])
+
+const emit = defineEmits(['openSpare']);
+
+function handleSpareClick() {
+ emit('openSpare');
+ isModalOpen.value = true;
+}
+</script>
+
+<style>
+@keyframes jump {
+ 0%,
+ 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-10px);
+ }
+}
+
+.jump {
+ animation: jump 0.6s infinite ease-in-out;
+}
+</style>
\ No newline at end of file
--
GitLab