118 lines
5.6 KiB
Vue
118 lines
5.6 KiB
Vue
<script setup>
|
|
import { defineProps, ref, nextTick, onMounted } from 'vue';
|
|
import { gsap } from 'gsap';
|
|
import { initFlowbite } from 'flowbite';
|
|
import { marked } from 'marked';
|
|
|
|
onMounted(() => {
|
|
initFlowbite();
|
|
faqs[0].categoryContent[0].state = true;
|
|
});
|
|
|
|
const faqArticleContainer = ref(null);
|
|
|
|
const props = defineProps({
|
|
block: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const faqs = props.block.faqs || [
|
|
{
|
|
categoryName: 'Kategori 1',
|
|
categoryContent: [
|
|
{ question: 'Spørsmål 1', answer: 'Dette er svar på spørsmål 1', state: false },
|
|
{ question: 'Spørsmål 2', answer: 'Dette er svar på spørsmål 2', state: false },
|
|
{ question: 'Spørsmål 3', answer: 'Dette er svar på spørsmål 3', state: false }
|
|
]
|
|
},
|
|
{
|
|
categoryName: 'Kategori 2',
|
|
categoryContent: [
|
|
{ question: 'Spørsmål 4', answer: 'Dette er svar på spørsmål 4', state: false },
|
|
{ question: 'Spørsmål 5', answer: 'Dette er svar på spørsmål 5', state: false },
|
|
{ question: 'Spørsmål 6', answer: 'Dette er svar på spørsmål 6', state: false }
|
|
]
|
|
}
|
|
];
|
|
|
|
const setFalseExcept = (categoryIndex, qaIndex) => {
|
|
faqs.forEach((category, cIdx) => {
|
|
category.categoryContent.forEach((qa, qIdx) => {
|
|
qa.state = cIdx === categoryIndex && qIdx === qaIndex;
|
|
});
|
|
});
|
|
};
|
|
|
|
const showFaq = (categoryIndex, qaIndex) => {
|
|
gsap.to(faqArticleContainer.value, {y: 200, opacity: 0, onComplete: () => {
|
|
setFalseExcept(categoryIndex, qaIndex);
|
|
// Wait for the DOM to update
|
|
nextTick().then(() => {
|
|
// Animate new articles in from the right
|
|
gsap.fromTo(faqArticleContainer.value, {y: 200, opacity: 0}, {y: 0, opacity: 1});
|
|
});
|
|
}});
|
|
};
|
|
|
|
const stateOf = (categoryIndex, qaIndex) => {
|
|
return faqs[categoryIndex].categoryContent[qaIndex]?.state;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<section :id="block.anchorName" class="relative py-20 md:py-24 overflow-hidden mx-auto max-w-[1280px] bg-black">
|
|
<div class="relative container px-4 mx-auto">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="text-center mb-20">
|
|
<span v-if="block.showlabel" class="inline-block py-1 px-3 mb-4 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">
|
|
{{ block.label || 'Skriv inn en tekst for merkelappen' }}
|
|
</span>
|
|
<h1 v-if="block.showtitle" class="font-heading text-5xl xs:text-6xl md:text-7xl font-bold text-gray-500">
|
|
<span>{{ block.title || 'Overskrift' }} </span>
|
|
<span class="font-serif italic font-normal">{{ block.titlecursive || 'Overskriftkursiv' }}</span>
|
|
</h1>
|
|
</div>
|
|
<div class="flex flex-wrap -mx-4 -mb-8">
|
|
<div class="w-full lg:w-1/3 px-4 mb-15 lg:mb-0">
|
|
<div class="flex flex-wrap -mx-2 lg:flex-col lg:max-w-sm border-b lg:border-b-0 lg:border-r border-gray-100">
|
|
<div v-for="(faq, index) in faqs" :key="index" class="w-full md:w-1/2 lg:w-full px-2 mb-15">
|
|
<h4 class="text-2xl font-semibold mb-6 text-amber-600">{{ faq.categoryName }}</h4>
|
|
<ul class="mb-6">
|
|
<li v-for="(category, catIndex) in faq.categoryContent" :key="catIndex" class="mb-6">
|
|
<button type="button" @click="showFaq(index, catIndex)" class="flex items-center text-lg hover:text-amber-700" :class="stateOf(index, catIndex) ? 'text-amber-700 font-semibold' : 'text-white font-normal'">
|
|
<svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="6" cy="6" r="5" stroke="#C3C6CE" stroke-width="2"></circle>
|
|
</svg>
|
|
<span class="ml-3">
|
|
{{ category.question }}
|
|
</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full lg:w-2/3 px-4" ref="faqArticleContainer">
|
|
<template v-for="(faq, index) in faqs" :key="index">
|
|
<template v-for="(category, catIndex) in faq.categoryContent" :key="catIndex">
|
|
<div v-show="stateOf(index, catIndex)" class="max-w-xl xl:max-w-3xl mx-auto lg:mr-0">
|
|
<h2 class="text-5xl font-semibold text-gray-500 mb-14">{{ category.question }}</h2>
|
|
<div v-if="category.answer" v-html="marked(category.answer)" class="text-gray-300">
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Optional FAQ list styles */
|
|
</style>
|