Merge pull request #44 from UoaWDCC/HT-#28/create-faq-second-accordian

HT-28/create faq second accordian

Author: nathandalpatan

src/app/(frontend)/faq/page.tsx

@@ -1,10 +1,35 @@
 import Header from '@/components/common/Header'
 import Footer from '@/components/common/Footer'
+import SecondAccordion from '@/components/faq/SecondAccordion'
+
+const items = [
+  {
+    title: 'What is Hidden Treasure?',
+    content:
+      'Aut quia assumenda eum nostrum velit est quidem facere aut impedit doloribus ut rerum culpa est eligendi veniam. Qui blanditiis N ut sint beatae.',
+  },
+  {
+    title: 'A very fascinating question? ',
+    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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+  },
+  {
+    title: 'Another very fascinating question? ',
+    content:
+      'Aut quia assumenda eum nostrum velit est quidem facere aut impedit doloribus ut rerum culpa est eligendi veniam. Qui blanditiis N ut sint beatae.',
+  },
+  {
+    title: 'An extremely shocking question?',
+    content:
+      'Aut quia assumenda eum nostrum velit est quidem facere aut impedit doloribus ut rerum culpa est eligendi veniam. Qui blanditiis N ut sint beatae.',
+  },
+]
 
 export default async function AboutPage() {
   return (
     <div className="home">
       <Header />
+      <SecondAccordion items={items} />
       <Footer />
     </div>
   )

src/components/faq/SecondAccordion.tsx

@@ -0,0 +1,46 @@
+'use client'
+import { useState } from 'react'
+
+type AccordionItem = {
+  title: string
+  content: string
+}
+
+type Props = {
+  items: AccordionItem[]
+}
+
+export default function SecondAccordion({ items }: Props) {
+  const [openId, setOpenId] = useState<number | null>(null)
+
+  const toggle = (id: number) => {
+    setOpenId((prev) => (prev === id ? null : id))
+  }
+
+  return (
+    <div className="h-140 w-screen px-40 pt-20">
+      {items.map((items, index) => (
+        <div key={index} className="border-t">
+          <button
+            className="w-full text-left px-4 py-2 cursor-pointer"
+            onClick={() => toggle(index)}
+          >
+            <div className="flex flex-row justify-between">
+              <h3 className="font-bold">{items.title}</h3>
+              <span className="text-2xl font-bold">{openId === index ? '-' : '+'}</span>
+            </div>
+          </button>
+          <div
+            className={`px-4 pt-2 overflow-hidden transition-all duration-300 ease-in-out ${
+              index === openId
+                ? 'opacity-100 max-h-96 pb-8'
+                : 'opacity-0 max-h-0 pointer-events-auto'
+            }`}
+          >
+            {items.content}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}