fix layout

4 files changed, 104 insertions, 3 deletions

diff --git a/src/core/components/layouts/AppLayout.jsx b/src/core/components/layouts/AppLayout.jsx
index 006c47c7..a325b1c1 100644
--- a/src/core/components/layouts/AppLayout.jsx
+++ b/src/core/components/layouts/AppLayout.jsx
@@ -8,8 +8,8 @@ const AppLayout = ({ children, title }) => {
       <AnimationLayout>
         <AppBar title={title} />
         {children}
-        <BasicFooter />
       </AnimationLayout>
+      <BasicFooter />
     </>
   )
 }
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>
+  )
+}
diff --git a/src/pages/my/menu.jsx b/src/pages/my/menu.jsx
index 40c84668..b9fd30ee 100644
--- a/src/pages/my/menu.jsx
+++ b/src/pages/my/menu.jsx
@@ -54,7 +54,7 @@ export default function Menu() {
 
             <div className='divide-y divide-gray_r-6 border-y border-gray_r-6 mt-4'>
               <LinkItem href='/'>Customer Support</LinkItem>
-              <LinkItem href='/'>F.A.Q</LinkItem>
+              <LinkItem href='/faqs'>F.A.Q</LinkItem>
             </div>
           </div>
 
@@ -90,7 +90,7 @@ const MenuHeader = ({ children, ...props }) => (
 const LinkItem = ({ children, ...props }) => (
   <Link
     {...props}
-    className='!text-gray_r-11 !font-normal p-4 flex items-center'
+    className='!text-gray_r-12/70 !font-normal p-4 flex items-center'
   >
     {children}
     <div className='ml-auto !text-gray_r-11'>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 5ba9e902..0137351e 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -17,6 +17,10 @@ body {
         overflow-x-clip;
 }
 
+#__next main {
+    @apply min-h-screen
+}
+
 button {
     @apply block;
 }