44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Section } from "./Section";
|
|
import { FAQ_CONFIG } from "@/config/course";
|
|
|
|
export function FAQSection() {
|
|
const [openIndex, setOpenIndex] = useState<number | null>(null);
|
|
|
|
return (
|
|
<Section>
|
|
<h2 className="mb-10 text-center text-xl font-bold sm:text-2xl md:text-3xl">
|
|
{FAQ_CONFIG.title}
|
|
</h2>
|
|
<div className="mx-auto max-w-2xl space-y-2">
|
|
{FAQ_CONFIG.items.map((item, i) => (
|
|
<div
|
|
key={i}
|
|
className="overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--card)] transition"
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpenIndex(openIndex === i ? null : i)}
|
|
className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition hover:bg-[var(--muted)] sm:px-5"
|
|
>
|
|
<span className="font-medium">{item.q}</span>
|
|
<span
|
|
className={`shrink-0 text-[var(--muted-foreground)] transition-transform ${openIndex === i ? "rotate-180" : ""}`}
|
|
>
|
|
▼
|
|
</span>
|
|
</button>
|
|
{openIndex === i && (
|
|
<div className="border-t border-[var(--border)] px-4 py-3 text-sm text-[var(--muted-foreground)] sm:px-5">
|
|
{item.a}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Section>
|
|
);
|
|
}
|