From a1b9b647a6c4bda1f5db63879639d44543f9557e Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 1 Mar 2023 13:53:31 +0700
Subject: fix layout

---
 src/pages/faqs.jsx | 97 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 src/pages/faqs.jsx

(limited to 'src/pages/faqs.jsx')

diff --git a/src/pages/faqs.jsx b/src/pages/faqs.jsx
new file mode 100644
index 00000000..ddbb4b0a
--- /dev/null
+++ b/src/pages/faqs.jsx
@@ -0,0 +1,97 @@
+import { useEffect, useState } from 'react'
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'
+import AppLayout from '@/core/components/layouts/AppLayout'
+
+const dataFaqs = [
+  {
+    id: 1,
+    name: 'Akun',
+    description: 'Bantuan tentang pengelolaan fitur dan akun'
+  },
+  {
+    id: 2,
+    name: 'Pembelian',
+    description:
+      'Bantuan seputar status stock, layanan pengiriman & asuransi hingga seluruh indonesia'
+  },
+  {
+    id: 3,
+    name: 'Metode Pembayaran',
+    description: 'Bantuan terkait layanan metode pembayaran'
+  },
+  {
+    id: 4,
+    name: 'Quotation',
+    description: 'Bantuan fitur RFQ & quotation Express'
+  },
+  {
+    id: 5,
+    name: 'Faktur Pajak & Invoice',
+    description: 'Bantuan seputar layanan terbit faktur pajak & invoice'
+  },
+  {
+    id: 6,
+    name: 'Pengembalian & Garansi',
+    description: 'Bantuan cara pengembalian produk & garansi produk'
+  }
+]
+
+export default function Faqs() {
+  const [faqs, setFaqs] = useState([])
+
+  useEffect(() => {
+    if (faqs.length == 0) {
+      setFaqs(
+        dataFaqs.map((dataFaq) => ({
+          ...dataFaq,
+          isOpen: false
+        }))
+      )
+    }
+  }, [faqs])
+
+  const toggleFaq = (id) => {
+    const faqsToUpdate = faqs.map((faq) => {
+      if (faq.id == id) faq.isOpen = !faq.isOpen
+      return faq
+    })
+    setFaqs(faqsToUpdate)
+  }
+
+  return (
+    <AppLayout title='FAQs'>
+      <div className='divide-y divide-gray_r-6'>
+        {faqs.map((faq, index) => (
+          <div
+            className='p-4'
+            key={index}
+          >
+            <div className='flex gap-x-3 items-center'>
+              <div className='flex-1'>
+                <p className='font-medium mb-1'>{faq.name}</p>
+                <p className='text-caption-1 text-gray_r-11'>{faq.description}</p>
+              </div>
+              <button
+                type='button'
+                className='p-2 rounded bg-gray_r-4 h-fit'
+                onClick={() => toggleFaq(faq.id)}
+              >
+                {faq.isOpen ? (
+                  <ChevronUpIcon className='w-5' />
+                ) : (
+                  <ChevronDownIcon className='w-5' />
+                )}
+              </button>
+            </div>
+            {faq.isOpen && (
+              <p className='text-caption-1 text-gray_r-11 leading-7 mt-4'>
+                {faq?.content ||
+                  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'}
+              </p>
+            )}
+          </div>
+        ))}
+      </div>
+    </AppLayout>
+  )
+}
-- 
cgit v1.2.3