80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { FAQ_ITEMS } from "@/app/data/vip.mock";
|
||
import styles from "../vip.module.css";
|
||
|
||
function ChevronDown() {
|
||
return (
|
||
<svg className={styles.faqChevron} width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden>
|
||
<path
|
||
d="M6 9l6 6 6-6"
|
||
stroke="currentColor"
|
||
strokeWidth="2"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
/>
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
export function FAQSection() {
|
||
const [openIndex, setOpenIndex] = useState<number | null>(0);
|
||
|
||
return (
|
||
<section className={`${styles.section} ${styles.faqSection}`} aria-labelledby="faq-heading">
|
||
<div className={`${styles.faqInner} animate__animated animate__fadeInUp`} style={{ animationDelay: "0.15s", animationFillMode: "both" }}>
|
||
<p className={styles.faqEyebrow}>
|
||
<span className={styles.faqEyebrowDot} aria-hidden />
|
||
FAQ
|
||
</p>
|
||
<h2 id="faq-heading" className={styles.faqHeadline}>
|
||
常见问题
|
||
</h2>
|
||
<p className={styles.faqSub}>
|
||
购买前可快速了解会员权益与流程；点击问题展开详情。
|
||
</p>
|
||
<div className={styles.faqList} role="list">
|
||
{FAQ_ITEMS.map((item, i) => {
|
||
const open = openIndex === i;
|
||
const panelId = `faq-panel-${i}`;
|
||
const triggerId = `faq-trigger-${i}`;
|
||
return (
|
||
<div
|
||
key={i}
|
||
className={`${styles.faqItem} ${open ? styles.faqItemOpen : ""}`}
|
||
role="listitem"
|
||
>
|
||
<button
|
||
type="button"
|
||
id={triggerId}
|
||
className={styles.faqTrigger}
|
||
aria-expanded={open}
|
||
aria-controls={panelId}
|
||
onClick={() => setOpenIndex(open ? null : i)}
|
||
>
|
||
<span className={styles.faqIndex} aria-hidden>
|
||
{i + 1}
|
||
</span>
|
||
<span className={styles.faqQuestionText}>{item.q}</span>
|
||
<ChevronDown />
|
||
</button>
|
||
<div
|
||
id={panelId}
|
||
role="region"
|
||
aria-labelledby={triggerId}
|
||
className={`${styles.faqPanel} ${open ? styles.faqPanelOpen : ""}`}
|
||
>
|
||
<div className={styles.faqPanelInner}>
|
||
<p className={styles.faqAnswer}>{item.a}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|