Merge branch 'develop' into setup-tests
This commit is contained in:
RcleydsonR
commit
db2d15b318
19568
package-lock.json
generated
19568
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -19,9 +19,11 @@
|
||||
"alchemy-sdk": "^2.3.0",
|
||||
"axios": "^1.2.1",
|
||||
"crc": "^3.8.0",
|
||||
"marked": "^4.2.12",
|
||||
"pinia": "^2.0.23",
|
||||
"qrcode": "^1.5.1",
|
||||
"vue": "^3.2.41",
|
||||
"vue-markdown": "^2.2.4",
|
||||
"vue-router": "^4.1.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -31,8 +33,10 @@
|
||||
"@rushstack/eslint-patch": "^1.1.4",
|
||||
"@types/crc": "^3.8.0",
|
||||
"@types/jest": "^27.0.0",
|
||||
"@types/marked": "^4.0.8",
|
||||
"@types/node": "^16.11.68",
|
||||
"@types/qrcode": "^1.5.0",
|
||||
"@types/vue-markdown": "^2.2.1",
|
||||
"@vitejs/plugin-vue": "^3.1.2",
|
||||
"@vitejs/plugin-vue-jsx": "^2.0.1",
|
||||
"@vitest/coverage-c8": "^0.28.2",
|
||||
|
||||
3
src/assets/minus.svg
Normal file
3
src/assets/minus.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="18" height="2" viewBox="0 0 18 2" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.84559e-07 0L18 1.43051e-06V2L0 2L1.84559e-07 0Z" fill="#F59E0B"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 219 B |
4
src/assets/plus.svg
Normal file
4
src/assets/plus.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 18L8 0L10 8.74228e-08L10 18H8Z" fill="#F59E0B"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.84559e-07 8L18 8V10L0 10L1.84559e-07 8Z" fill="#F59E0B"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 314 B |
@ -62,6 +62,7 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<RouterLink :to="'/'" class="default-button">
|
||||
<img
|
||||
alt="P2Pix logo"
|
||||
class="logo"
|
||||
@ -69,7 +70,10 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
|
||||
width="75"
|
||||
height="75"
|
||||
/>
|
||||
</RouterLink>
|
||||
|
||||
<div class="flex gap-4 items-center">
|
||||
<RouterLink :to="'/faq'" class="default-button"> FAQ </RouterLink>
|
||||
<RouterLink :to="sellerView ? '/' : '/seller'" class="default-button">
|
||||
{{ sellerView ? "Quero comprar" : "Quero vender" }}
|
||||
</RouterLink>
|
||||
|
||||
12
src/model/Faq.ts
Normal file
12
src/model/Faq.ts
Normal file
@ -0,0 +1,12 @@
|
||||
export type Faq = Section[];
|
||||
|
||||
export type Section = {
|
||||
name: string;
|
||||
items: Question[];
|
||||
};
|
||||
|
||||
export type Question = {
|
||||
title: string;
|
||||
content: string;
|
||||
isOpen?: boolean;
|
||||
};
|
||||
@ -1,6 +1,7 @@
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import HomeView from "../views/HomeView.vue";
|
||||
import TransactionHistoryView from "../views/TransactionHistoryView.vue";
|
||||
import FaqView from "../views/FaqView.vue";
|
||||
import ManageBidsView from "../views/ManageBidsView.vue";
|
||||
import SellerView from "@/views/SellerView.vue";
|
||||
|
||||
@ -27,6 +28,11 @@ const router = createRouter({
|
||||
name: "manage bids",
|
||||
component: ManageBidsView,
|
||||
},
|
||||
{
|
||||
path: "/faq",
|
||||
name: "faq",
|
||||
component: FaqView,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
|
||||
185
src/views/FaqView.vue
Normal file
185
src/views/FaqView.vue
Normal file
@ -0,0 +1,185 @@
|
||||
<script setup lang="ts">
|
||||
import type { Faq, Section } from "@/model/Faq";
|
||||
import { ref } from "vue";
|
||||
import { marked } from "marked";
|
||||
|
||||
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 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;
|
||||
|
||||
faq.value[selectedSection.value].items[index].content = 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 text-xl 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-gray-800 font-bold">Sumário</h1>
|
||||
<h3
|
||||
:class="index == selectedSection ? 'selected-sumario' : 'sumario'"
|
||||
v-for="(f, index) in faq"
|
||||
@click="setSelectedSection(index)"
|
||||
>
|
||||
{{ f.name }}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="w-4/6">
|
||||
<div v-for="(item, index) in faq[selectedSection].items">
|
||||
<div class="flex cursor-pointer" @click="openItem(index)">
|
||||
<img
|
||||
alt="plus"
|
||||
src="@/assets/plus.svg"
|
||||
class="mr-3"
|
||||
v-if="!item.isOpen"
|
||||
/>
|
||||
<img
|
||||
alt="plus"
|
||||
src="@/assets/minus.svg"
|
||||
class="mr-3"
|
||||
v-if="item.isOpen"
|
||||
/>
|
||||
<h4>{{ item.title }}</h4>
|
||||
</div>
|
||||
<div
|
||||
style="padding-top: 24px"
|
||||
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;
|
||||
}
|
||||
|
||||
.hr {
|
||||
border: 1px solid #1f2937;
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
@apply text-gray-800 text-xl;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
h2,
|
||||
h4 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
@apply flex flex-col items-center justify-center gap-4;
|
||||
}
|
||||
|
||||
.text {
|
||||
@apply text-gray-800 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 w-1/3;
|
||||
}
|
||||
|
||||
.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 w-1/3;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user