Update

components/faq/FaqSection.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useId, useRef, useState } from "react";
+import { CaretDownIcon } from "@phosphor-icons/react/dist/ssr";
+import styles from "./FaqSection.module.css";
+
+export type FaqItem = {
+  question: string;
+  answer: string;
+};
+
+type FaqSectionProps = {
+  title: string;
+  items: FaqItem[];
+};
+
+type AccordionItemProps = {
+  item: FaqItem;
+  isOpen: boolean;
+  buttonId: string;
+  panelId: string;
+  onToggle: () => void;
+};
+
+function AccordionItem({
+  item,
+  isOpen,
+  buttonId,
+  panelId,
+  onToggle,
+}: AccordionItemProps) {
+  const panelRef = useRef<HTMLDivElement | null>(null);
+
+  const handleToggle = () => {
+    const panel = panelRef.current;
+    if (!panel) return;
+
+    if (panel.style.maxHeight) {
+      panel.style.maxHeight = "";
+    } else {
+      panel.style.maxHeight = panel.scrollHeight + "px";
+    }
+
+    onToggle();
+  };
+
+  return (
+    <div className={styles.item}>
+      <h3 className={styles.itemHeading}>
+        <button
+          id={buttonId}
+          type="button"
+          className={styles.trigger}
+          aria-expanded={isOpen}
+          aria-controls={panelId}
+          onClick={handleToggle}
+        >
+          <span className={styles.triggerText}>{item.question}</span>
+
+          <span className={styles.iconWrap} aria-hidden="true">
+            <CaretDownIcon size={14} weight="bold" />
+          </span>
+        </button>
+      </h3>
+
+      <div
+        id={panelId}
+        ref={panelRef}
+        role="region"
+        aria-labelledby={buttonId}
+        className={styles.panel}
+      >
+        <div className={styles.panelInner}>
+          <p className={styles.answer}>{item.answer}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function FaqSection({ title, items }: FaqSectionProps) {
+  const baseId = useId();
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+
+  return (
+    <section className={styles.section} aria-labelledby="faq-heading">
+      <div className={styles.inner}>
+        <div className={styles.content}>
+          <h2 id="faq-heading" className={styles.heading}>
+            {title}
+          </h2>
+        </div>
+
+        <div className={styles.accordion}>
+          {items.map((item, index) => {
+            const isOpen = openIndex === index;
+
+            return (
+              <AccordionItem
+                key={item.question}
+                item={item}
+                isOpen={isOpen}
+                buttonId={`${baseId}-btn-${index}`}
+                panelId={`${baseId}-panel-${index}`}
+                onToggle={() => setOpenIndex(isOpen ? null : index)}
+              />
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}