hueso/P2Pix-Front-End
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💡 Create content to faq view

Browse Source
This commit is contained in:
Ronyell
2023-02-17 22:44:08 -03:00
parent f76a2b7736
commit acf75c88c0
4 changed files with 82 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/views/FaqView.vue
View File

@@ -2,69 +2,9 @@
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>([
{
name: "1. Como Começar",
items: [
{
title: "O que é uma carteira (wallet)",
content:
"# Lorem ipsum dolor sit **amet** consectetur. Neque libero magna mi purus. Aliquam vitae feugiat quis sapien. Pharetra gravida nisi donec bibendum mauris aliquam molestie. Et nunc placerat in ac integer maecenas arcu. Lotuam tincidunt morbi ac sed fames habitasse velit et nunc.",
},
{
title: "O que é uma carteira (wallet)",
content:
"Lorem ipsum dolor sit amet consectetur. Neque libero magna mi purus. Aliquam vitae feugiat quis sapien. Pharetra gravida nisi donec bibendum mauris aliquam molestie. Et nunc placerat in ac integer maecenas arcu. Lotuam tincidunt morbi ac sed fames habitasse velit et nunc.",
},
{
title: "O que é uma carteira (wallet)",
content:
"Lorem ipsum dolor sit amet consectetur. Neque libero magna mi purus. Aliquam vitae feugiat quis sapien. Pharetra gravida nisi donec bibendum mauris aliquam molestie. Et nunc placerat in ac integer maecenas arcu. Lotuam tincidunt morbi ac sed fames habitasse velit et nunc.",
},
],
},
{
name: "2. Comprar tokens",
items: [
{
title: "O que é um endereço de carteira (wallet address)",
content:
"Lorem ipsum dolor sit amet consectetur. Neque libero magna mi purus. Aliquam vitae feugiat quis sapien. Pharetra gravida nisi donec bibendum mauris aliquam molestie. Et nunc placerat in ac integer maecenas arcu. Lotuam tincidunt morbi ac sed fames habitasse velit et nunc.",
},
{
title: "O que é um endereço de carteira (wallet address)",
content:
"Lorem ipsum dolor sit amet consectetur. Neque libero magna mi purus. Aliquam vitae feugiat quis sapien. Pharetra gravida nisi donec bibendum mauris aliquam molestie. Et nunc placerat in ac integer maecenas arcu. Lotuam tincidunt morbi ac sed fames habitasse velit et nunc.",
},
{
title: "O que é um endereço de carteira (wallet address)",
content:
"Lorem ipsum dolor sit amet consectetur. Neque libero magna mi purus. Aliquam vitae feugiat quis sapien. Pharetra gravida nisi donec bibendum mauris aliquam molestie. Et nunc placerat in ac integer maecenas arcu. Lotuam tincidunt morbi ac sed fames habitasse velit et nunc.",
},
],
},
{
name: "3. Vender tokens",
items: [
{
title: "Como conectar a carteira ao p2pix",
content:
"Lorem ipsum dolor sit amet consectetur. Neque libero magna mi purus. Aliquam vitae feugiat quis sapien. Pharetra gravida nisi donec bibendum mauris aliquam molestie. Et nunc placerat in ac integer maecenas arcu. Lotuam tincidunt morbi ac sed fames habitasse velit et nunc.",
},
{
title: "Como conectar a carteira ao p2pix",
content:
"Lorem ipsum dolor sit amet consectetur. Neque libero magna mi purus. Aliquam vitae feugiat quis sapien. Pharetra gravida nisi donec bibendum mauris aliquam molestie. Et nunc placerat in ac integer maecenas arcu. Lotuam tincidunt morbi ac sed fames habitasse velit et nunc.",
},
{
title: "Como conectar a carteira ao p2pix",
content:
"Lorem ipsum dolor sit amet consectetur. Neque libero magna mi purus. Aliquam vitae feugiat quis sapien. Pharetra gravida nisi donec bibendum mauris aliquam molestie. Et nunc placerat in ac integer maecenas arcu. Lotuam tincidunt morbi ac sed fames habitasse velit et nunc.",
},
],
},
]);
const faq = ref<Faq>(faqContent);
const selectedSection = ref<number>(0);
@@ -76,9 +16,15 @@ 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>
@@ -127,11 +73,7 @@ const openItem = (index: number) => {
/>
<h4 class="text-white">{{ item.title }}</h4>
</div>
<div
style="padding-top: 24px; color: white"
v-if="item.isOpen"
v-html="item.content"
></div>
<div class="content" v-if="item.isOpen" v-html="item.content"></div>
<div class="hr"></div>
</div>
</div>
@@ -154,6 +96,23 @@ const openItem = (index: number) => {
@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;