From dc56a0f7cc10eea3f7a681e53bad274a03f24668 Mon Sep 17 00:00:00 2001
From: Kamil <kamil.piech.97@gmail.com>
Date: Fri, 23 Aug 2024 14:20:28 +0200
Subject: [PATCH] #27 - fix: code review fixes

---
 resources/js/Pages/Public/Faq.vue | 27 +++++----------------------
 1 file changed, 5 insertions(+), 22 deletions(-)

diff --git a/resources/js/Pages/Public/Faq.vue b/resources/js/Pages/Public/Faq.vue
index 19ef6e6..ff097fc 100644
--- a/resources/js/Pages/Public/Faq.vue
+++ b/resources/js/Pages/Public/Faq.vue
@@ -2,20 +2,13 @@
 import PublicLayout from '@/Layouts/PublicLayout.vue'
 import BackgroundGrid from '@/Components/BackgroundGrid.vue'
 import SectionHeader from '@/Components/SectionHeader.vue'
-import { PlusCircleIcon, MinusCircleIcon, NoSymbolIcon } from '@heroicons/vue/24/outline'
+import { NoSymbolIcon } from '@heroicons/vue/24/outline'
 import { Head } from '@inertiajs/inertia-vue3'
-import { ref } from 'vue'
 import DOMPurify from 'dompurify'
 
 defineProps({
   faqs: Object,
 })
-
-const openedIndex = ref(null)
-
-function toggleAnswer(index) {
-  openedIndex.value = openedIndex.value === index ? null : index
-}
 </script>
 
 <template>
@@ -31,28 +24,18 @@ function toggleAnswer(index) {
               FAQ
             </template>
             <template #subheader>
-              Pytania i odpowiedzi na najczęściej zadawane pytania
+              Często zadawane pytania i odpowiedzi na nie
             </template>
           </SectionHeader>
 
-          <div
-            class="mx-auto mt-10 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-4 border-t border-gray-200 pt-10 sm:mt-16 sm:pt-16 lg:mx-0 lg:max-w-none"
-          >
-            <div v-for="(faq, index) in faqs" :key="index" class="cursor-pointer" @click="toggleAnswer(index)">
+          <div class="mx-auto mt-10 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-4 border-t border-gray-200 pt-10 sm:mt-16 sm:pt-16 lg:mx-0 lg:max-w-none">
+            <div v-for="(faq, index) in faqs" :key="index" class="cursor-pointer">
               <div class="flex items-center justify-between bg-[#FAFAFC] p-4 text-lg font-semibold text-gray-600">
                 <div class="w-[90%]">
                   {{ faq.question }}
                 </div>
-                <div v-if="openedIndex !== index" class="ml-5 cursor-pointer">
-                  <PlusCircleIcon class="size-8 text-gray-600" />
-                </div>
-                <div v-else class="ml-5 cursor-pointer">
-                  <MinusCircleIcon class="size-8 text-gray-600" />
-                </div>
               </div>
-              <div v-if="openedIndex === index"
-                   class="text-md flex items-center justify-between bg-white px-4 py-5 font-normal text-gray-600"
-              >
+              <div class="text-md flex items-center justify-between bg-white px-4 py-5 font-normal text-gray-600">
                 <!-- eslint-disable vue/no-v-html -->
                 <p class="prose text-gray-600" v-html="DOMPurify.sanitize(faq.answer)" />
                 <!-- eslint-enable vue/no-v-html -->