Skip to content

Commit

Permalink
#27 - fix: code review fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
kamilpiech97 committed Aug 23, 2024
1 parent 924816b commit dc56a0f
Showing 1 changed file with 5 additions and 22 deletions.
27 changes: 5 additions & 22 deletions resources/js/Pages/Public/Faq.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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 -->
Expand Down

0 comments on commit dc56a0f

Please sign in to comment.