From 59e50e47978f99bd5b32f96411aec73af0b381f4 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 22 Jun 2023 14:54:47 +0200
Subject: [PATCH] Created component for entry

---
 .../xml/tooltips/TooltipCategoryComponent.vue |  6 ++---
 .../xml/tooltips/TooltipComponent.vue         |  7 +++++-
 .../xml/tooltips/TooltipEntryComponent.vue    | 22 +++++++++++++++++++
 3 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 Frontend/src/components/xml/tooltips/TooltipEntryComponent.vue

diff --git a/Frontend/src/components/xml/tooltips/TooltipCategoryComponent.vue b/Frontend/src/components/xml/tooltips/TooltipCategoryComponent.vue
index 64b8e32..8247758 100644
--- a/Frontend/src/components/xml/tooltips/TooltipCategoryComponent.vue
+++ b/Frontend/src/components/xml/tooltips/TooltipCategoryComponent.vue
@@ -14,9 +14,9 @@ function toggleTooltips() {
 
 <template>
     <div class="flex p-2 flex-col rounded-xl bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-700 dark:to-sky-900">
-        <button :class="{ 'mb-2' : !isCategoryHidden }" class="text-white" @click="toggleTooltips()">{{ props.name }}</button>
-        <div id="content" :class="{'hidden' : isCategoryHidden}" class="w-full p-2 rounded-xl dark:text-white bg-indigo-50 dark:bg-slate-800" >
-            Ultrices purus convallis pretium. Velit adipiscing curabitur facilisis proin, dis elit fames conubia lacinia adipiscing massa montes. Nec gravida volutpat viverra viverra et eu ac morbi id proin donec. Dis sollicitudin egestas sociis metus cras inceptos vehicula auctor felis vestibulum? Non potenti platea elit morbi suscipit eleifend, condimentum phasellus aliquet condimentum eros sodales. Mus pretium adipiscing, tempor gravida. Sapien.
+        <button :class="{ 'mb-2' : !isCategoryHidden }" class="dark:text-slate-100" @click="toggleTooltips()">{{ props.name }}</button>
+        <div id="content" :class="{'hidden' : isCategoryHidden}" class="flex flex-col gap-4 w-full h-fit p-2 rounded-xl dark:text-white bg-indigo-50 dark:bg-slate-800" >
+            <slot></slot>
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/tooltips/TooltipComponent.vue b/Frontend/src/components/xml/tooltips/TooltipComponent.vue
index 4d4d1b6..1961f59 100644
--- a/Frontend/src/components/xml/tooltips/TooltipComponent.vue
+++ b/Frontend/src/components/xml/tooltips/TooltipComponent.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import tooltipCategoryComponent from '@components/xml/tooltips/TooltipCategoryComponent.vue'
+import tooltipEntryComponent from '@components/xml/tooltips/TooltipEntryComponent.vue'
 const areTooltipsHidden = ref(true)
 
 function toggleTooltips() {
@@ -13,7 +14,11 @@ function toggleTooltips() {
     <div :class="{ 'w-1/2' : !areTooltipsHidden }" class="flex items-stretch p-2 flex-row rounded-xl bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-700 dark:to-sky-900">
         <button class="rotate-90 text-xl w-8 text-white" @click="toggleTooltips()">Tooltips</button>
         <div id="content" :class="{'hidden' : areTooltipsHidden}" class="w-full p-2 rounded-xl dark:text-white bg-indigo-50 dark:bg-slate-800" >
-            <tooltipCategoryComponent name="Category I"></tooltipCategoryComponent>
+            <tooltipCategoryComponent name="Category I">
+                <tooltipEntryComponent name="Test"></tooltipEntryComponent>
+                <tooltipEntryComponent name="Teścik">Teścik</tooltipEntryComponent>
+                <tooltipEntryComponent name="Dłuuuuuuuggiiiiii teeeeeeeeeestttt"></tooltipEntryComponent>
+            </tooltipCategoryComponent>
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/tooltips/TooltipEntryComponent.vue b/Frontend/src/components/xml/tooltips/TooltipEntryComponent.vue
new file mode 100644
index 0000000..8a92c6f
--- /dev/null
+++ b/Frontend/src/components/xml/tooltips/TooltipEntryComponent.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const isEntryHidden = ref(true)
+
+const props = defineProps({
+    name: {type: String, required: true}
+})
+
+function toggleTooltips() {
+    isEntryHidden.value = !isEntryHidden.value;
+}
+
+</script>
+
+<template>
+    <div class="flex p-1 flex-col rounded-xl border border-slate-400 dark:border-slate-400">
+        <button :class="{ 'mb-2' : !isEntryHidden }" class="dark:text-slate-100" @click="toggleTooltips()">{{ props.name }}</button>
+        <div id="content" :class="{'hidden' : isEntryHidden}" class="w-full p-2 rounded-xl dark:text-white bg-indigo-50 dark:bg-slate-800" >
+            Ultrices purus convallis pretium. Velit adipiscing curabitur facilisis proin, dis elit fames conubia lacinia adipiscing massa montes. Nec gravida volutpat viverra viverra et eu ac morbi id proin donec. Dis sollicitudin egestas sociis metus cras inceptos vehicula auctor felis vestibulum? Non potenti platea elit morbi suscipit eleifend, condimentum phasellus aliquet condimentum eros sodales. Mus pretium adipiscing, tempor gravida. Sapien.
+        </div>
+    </div>
+</template>
\ No newline at end of file