apply i18 to FAQ

src/pages/FAQ.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import {
   Accordion,
   AccordionContent,
@@ -7,50 +8,39 @@ import {
   AccordionTrigger,
 } from '@/components/ui/accordion'
 
-interface FAQ {
-  question: string
-  answer: string
-}
+const { t, locale } = useI18n()
 
-const faqs = ref<FAQ[]>([
+const faqs = computed(() => [
   {
-    question: "What is Bitcoin Lightning?",
-    answer: "Bitcoin Lightning is a layer 2 payment protocol that operates on top of the Bitcoin blockchain. It enables instant, low-cost transactions between participating nodes, making it ideal for everyday purchases."
+    question: t('faq.items.0.question'),
+    answer: t('faq.items.0.answer')
   },
   {
-    question: "How do I pay with Lightning?",
-    answer: "To pay with Lightning, you'll need a Lightning-enabled Bitcoin wallet. When making a purchase, simply scan the merchant's QR code with your wallet and confirm the payment. The transaction is nearly instant!"
+    question: t('faq.items.1.question'),
+    answer: t('faq.items.1.answer')
   },
   {
-    question: "Is Lightning safe to use?",
-    answer: "Yes, Lightning is secure as it inherits Bitcoin's security model. While it operates differently from base-layer Bitcoin transactions, it maintains high security standards through smart contract technology."
+    question: t('faq.items.2.question'),
+    answer: t('faq.items.2.answer')
   },
   {
-    question: "How can I list my business?",
-    answer: "If you're a business accepting Lightning payments and would like to be listed in our directory, please contact us through our submission form [coming soon]."
+    question: t('faq.items.3.question'),
+    answer: t('faq.items.3.answer')
   }
 ])
 </script>
 
 <template>
   <div class="container mx-auto px-4 py-8">
-    <div class="max-w-4xl mx-auto">
-      <h1 class="text-3xl font-bold tracking-tight sm:text-4xl mb-8">
-        Frequently Asked Questions
+    <div class="max-w-3xl mx-auto">
+      <h1 class="text-3xl font-bold text-center mb-8">
+        {{ t('faq.title') }}
       </h1>
 
-      <Accordion type="single" collapsible class="w-full">
-        <AccordionItem
-          v-for="(faq, index) in faqs"
-          :key="index"
-          :value="`item-${index}`"
-        >
-          <AccordionTrigger class="text-left">
-            {{ faq.question }}
-          </AccordionTrigger>
-          <AccordionContent>
-            {{ faq.answer }}
-          </AccordionContent>
+      <Accordion type="single" collapsible>
+        <AccordionItem v-for="(faq, index) in faqs" :key="index" :value="'item-' + index">
+          <AccordionTrigger>{{ faq.question }}</AccordionTrigger>
+          <AccordionContent>{{ faq.answer }}</AccordionContent>
         </AccordionItem>
       </Accordion>
     </div>