59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { FAQ_ITEMS } from "@/app/data/vip.mock";
|
|
import styles from "../vip.module.css";
|
|
|
|
export function FAQSection() {
|
|
const [openIndex, setOpenIndex] = useState<number | null>(null);
|
|
|
|
return (
|
|
<section className={styles.section}>
|
|
<h2 className={styles.sectionTitle}>常见问题</h2>
|
|
<div
|
|
className="animate__animated animate__fadeInUp"
|
|
style={{ animationDelay: "0.2s", animationFillMode: "both" }}
|
|
>
|
|
{FAQ_ITEMS.map((item, i) => (
|
|
<div
|
|
key={i}
|
|
className={styles.card}
|
|
style={{
|
|
marginBottom: "0.75rem",
|
|
cursor: "pointer",
|
|
}}
|
|
onClick={() => setOpenIndex(openIndex === i ? null : i)}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
fontWeight: 500,
|
|
color: "var(--foreground)",
|
|
}}
|
|
>
|
|
{item.q}
|
|
<span style={{ fontSize: "1.2rem", transition: "transform 0.2s", transform: openIndex === i ? "rotate(180deg)" : "none" }}>
|
|
▼
|
|
</span>
|
|
</div>
|
|
{openIndex === i && (
|
|
<p
|
|
style={{
|
|
marginTop: "0.75rem",
|
|
fontSize: "0.9rem",
|
|
color: "var(--muted-foreground)",
|
|
lineHeight: 1.5,
|
|
}}
|
|
>
|
|
{item.a}
|
|
</p>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|