Update FAQ component

src/frontend/components.d.ts

@@ -7,10 +7,11 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    CNFT: typeof import('./src/components/MiniApp/CNFT.vue')['default']
+    Accordion: typeof import('./src/components/Accordion.vue')['default']
+    CNFT: typeof import('./src/components/CNFT.vue')['default']
     ElCol: typeof import('element-plus/es')['ElCol']
-    ElInput: typeof import('element-plus/es')['ElInput']
     ElRow: typeof import('element-plus/es')['ElRow']
+    Faq: typeof import('./src/components/Faq.vue')['default']
     FAQ: typeof import('./src/components/FAQ.vue')['default']
     Footer: typeof import('./src/components/Footer.vue')['default']
     Header: typeof import('./src/components/Header.vue')['default']

src/frontend/src/assets/en/faq.json

@@ -0,0 +1,17 @@
+[
+  {
+    "question": "What is Vue 3?",
+    "answer": "Vue 3 is the latest version of the Vue framework.",
+    "open": false
+  },
+  {
+    "question": "How to create a component in Vue 3?",
+    "answer": "You can create a component in Vue 3 using the <script setup> syntax or the standard component definition.",
+    "open": false
+  },
+  {
+    "question": "What is a prop in Vue 3?",
+    "answer": "A prop is a custom attribute for passing information from parent to child components.",
+    "open": false
+  }
+]

src/frontend/src/assets/ru/faq.json

@@ -0,0 +1,17 @@
+[
+  {
+    "question": "What is Vue 3?",
+    "answer": "Vue 3 is the latest version of the Vue framework.",
+    "open": false
+  },
+  {
+    "question": "How to create a component in Vue 3?",
+    "answer": "You can create a component in Vue 3 using the <script setup> syntax or the standard component definition.",
+    "open": false
+  },
+  {
+    "question": "What is a prop in Vue 3?",
+    "answer": "A prop is a custom attribute for passing information from parent to child components.",
+    "open": false
+  }
+]

src/frontend/src/components/Accordion.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="accordion">
+    <div v-for="(item, index) in items" :key="index" class="accordion-item">
+      <div class="accordion-header" @click="toggle(index)">
+        <h2>{{ item.question }}</h2>
+      </div>
+      <div v-show="item.open" class="accordion-content">
+        <p>{{ item.answer }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: "Accordion",
+    props: {
+        items: {
+            type: Array,
+            required: true,
+        },
+    },
+    methods: {
+        toggle(index) {
+            this.items[index].open = !this.items[index].open;
+        },
+    },
+};
+</script>
+
+<style scoped>
+.accordion {
+    border: 1px solid #333;
+    border-radius: 4px;
+    background-color: #222;
+}
+
+.accordion-item {
+    border-bottom: 1px solid #333;
+}
+
+.accordion-header {
+    padding: 1rem;
+    cursor: pointer;
+    background-color: #333;
+    color: #fff;
+    font-family: Psychic-Force, sans-serif;
+}
+
+.accordion-header:hover {
+    background-color: #444;
+}
+
+.accordion-content {
+    padding: 1rem;
+    background-color: #222;
+    color: #ddd;
+}
+</style>

src/frontend/src/components/MiniApp/CNFT.vue → src/frontend/src/components/CNFT.vue

@@ -28,7 +28,7 @@
 <script setup lang="ts">
 import { ref, watch, onMounted } from "vue";
 import { MainButton, useWebAppHapticFeedback, useWebApp } from "vue-tg";
-import { useUserStore } from "../../stores/user";
+import { useUserStore } from "../stores/user.js";
 import { Address, Cell, beginCell } from "@ton/core";
 import { TonConnectUI } from "@tonconnect/ui";
 import { ElLoading, ElMessage } from "element-plus";

src/frontend/src/components/FAQ.vue

@@ -1,68 +1,22 @@
 <template>
-  <BackButton @click="handleBackButton" />
-  <h1>FAQ</h1>
-  <el-input v-model="filterText" placeholder="Filter keyword" />
-
-  <el-tree
-    ref="treeRef"
-    style="width: 100%"
-    class="filter-tree"
-    :data="data"
-    :props="defaultProps"
-    :filter-node-method="filterNode"
-  />
+  <div id="app">
+    <Accordion :items="faqItems" />
+  </div>
 </template>
 
-<script lang="ts" setup>
-import { ref, watch } from "vue";
-import { ElTree } from "element-plus";
-import { BackButton, useWebAppBackButton } from "vue-tg";
-import { useRouter } from "vue-router";
-
-const router = useRouter();
-
-function handleBackButton() {
-    useWebAppBackButton().hideBackButton();
-    router.back();
-}
-
-interface Tree {
-    [key: string]: any;
-}
-
-const filterText = ref("");
-const treeRef = ref<InstanceType<typeof ElTree>>();
-
-const defaultProps = {
-    children: "children",
-    label: "label",
+<script>
+import Accordion from "./Accordion.vue";
+import faq from "../assets/ru/faq.json";
+
+export default {
+  name: "FAQ",
+  components: {
+    Accordion,
+  },
+  data() {
+    return {
+      faqItems: faq,
+    };
+  },
 };
-
-watch(filterText, (val) => {
-    treeRef.value!.filter(val);
-});
-
-const filterNode = (value: string, data: Tree) => {
-    if (!value) return true;
-    return data.label.includes(value);
-};
-
-const data: Tree[] = [
-    {
-        label: "Когда минт?!",
-        children: [
-            {
-                label: "Когда-нибудь.",
-            },
-        ],
-    },
-    {
-        label: "Игра будет?",
-        children: [
-            {
-                label: "Обязательно будет!",
-            },
-        ],
-    },
-];
 </script>

src/frontend/src/main.ts

@@ -5,10 +5,10 @@ import ElementPlus from "element-plus";
 import "element-plus/dist/index.css";
 import ruLocale from "element-plus/es/locale/lang/ru";
 import MainComponent from "./components/Main.vue";
-import FAQComponent from "./components/FAQ.vue";
 import "./style.css";
 import App from "./App.vue";
-import CNFTComponent from "./components/MiniApp/CNFT.vue";
+import CNFTComponent from "./components/CNFT.vue";
+import FAQComponent from "./components/Faq.vue";
 
 const routes = [
   // RESERVED: /cnfts /api