22 lines
792 B
Vue
22 lines
792 B
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
const isCategoryHidden = ref(true)
|
|
|
|
const props = defineProps({
|
|
name: {type: String, required: true}
|
|
})
|
|
|
|
function toggleTooltips() {
|
|
isCategoryHidden.value = !isCategoryHidden.value;
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex p-2 flex-col rounded-xl shadow-lg bg-gradient-to-r from-gray-300 to-slate-300 dark:from-slate-500 dark:to-slate-600">
|
|
<button :class="{ 'mb-2' : !isCategoryHidden }" class="dark:text-slate-100 hover:font-bold" @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> |