145 lines
3.3 KiB
Vue
145 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import type { Faq } from "@/model/Faq";
|
|
import { ref } from "vue";
|
|
import { marked } from "marked";
|
|
import faqContent from "@/utils/files/faqContent.json";
|
|
|
|
const faq = ref<Faq>(faqContent);
|
|
|
|
const selectedSection = ref<number>(0);
|
|
|
|
const setSelectedSection = (index: number) => {
|
|
selectedSection.value = index;
|
|
};
|
|
|
|
const openItem = (index: number) => {
|
|
faq.value[selectedSection.value].items[index].isOpen =
|
|
!faq.value[selectedSection.value].items[index].isOpen;
|
|
|
|
marked.setOptions({
|
|
breaks: true,
|
|
gfm: true,
|
|
});
|
|
|
|
faq.value[selectedSection.value].items[index].content = marked(
|
|
faq.value[selectedSection.value].items[index].content
|
|
);
|
|
console.log(marked(faq.value[selectedSection.value].items[index].content));
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page">
|
|
<div class="text-container">
|
|
<span class="text font-extrabold text-5xl max-w-[50rem]"
|
|
>Perguntas Frequentes
|
|
</span>
|
|
<span class="text font-medium text-base max-w-[40rem]"
|
|
>Não conseguiu uma resposta para sua dúvida? Acesse a comunidade do
|
|
Discord para falar diretamente conosco.</span
|
|
>
|
|
</div>
|
|
|
|
<div class="flex justify-between w-10/12 mt-20">
|
|
<div>
|
|
<h1 class="text-3xl text-white font-bold">Sumário</h1>
|
|
<h3
|
|
:class="index == selectedSection ? 'selected-sumario' : 'sumario'"
|
|
v-for="(f, index) in faq"
|
|
v-bind:key="f.name"
|
|
@click="setSelectedSection(index)"
|
|
>
|
|
{{ f.name }}
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="w-4/6">
|
|
<div
|
|
v-for="(item, index) in faq[selectedSection].items"
|
|
v-bind:key="item.title"
|
|
>
|
|
<div class="flex cursor-pointer" @click="openItem(index)">
|
|
<img
|
|
alt="plus"
|
|
src="@/assets/plus.svg?url"
|
|
class="mr-3"
|
|
v-if="!item.isOpen"
|
|
/>
|
|
<img
|
|
alt="plus"
|
|
src="@/assets/minus.svg?url"
|
|
class="mr-3"
|
|
v-if="item.isOpen"
|
|
/>
|
|
<h4 class="text-white">{{ item.title }}</h4>
|
|
</div>
|
|
<div class="content" v-if="item.isOpen" v-html="item.content"></div>
|
|
<div class="hr"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.sumario {
|
|
margin-top: 24px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.selected-sumario {
|
|
font-weight: bolder;
|
|
margin-top: 24px;
|
|
cursor: pointer;
|
|
}
|
|
.page {
|
|
@apply flex flex-col items-center justify-center w-full mt-16;
|
|
}
|
|
|
|
div.content {
|
|
padding-top: 24px;
|
|
color: white;
|
|
}
|
|
|
|
.content :deep(ul) {
|
|
@apply list-disc m-2 p-3;
|
|
}
|
|
|
|
.content :deep(ol) {
|
|
@apply list-decimal m-2 p-3;
|
|
}
|
|
|
|
.content :deep(ol ul) {
|
|
@apply list-disc m-1 p-1;
|
|
}
|
|
|
|
.hr {
|
|
border: 1px solid #1f2937;
|
|
margin: 24px 0;
|
|
}
|
|
|
|
h3 {
|
|
@apply text-white;
|
|
}
|
|
|
|
h2,
|
|
h4 {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.text-container {
|
|
@apply flex flex-col items-center justify-center gap-4;
|
|
}
|
|
|
|
.text {
|
|
@apply text-white text-center;
|
|
}
|
|
.blur-container-row {
|
|
@apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 max-w-screen-sm;
|
|
}
|
|
|
|
.blur-container {
|
|
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 max-w-screen-sm;
|
|
}
|
|
</style>
|