37 lines
1.6 KiB
TypeScript
37 lines
1.6 KiB
TypeScript
import { useState } from "preact/hooks";
|
|
|
|
export function QuestionList(props: { questions: FrequentlyAskedQuestion[]; }) {
|
|
const [ open, setOpen ] = useState<number | null>(null);
|
|
|
|
const toggle = (index: number) => {
|
|
setOpen(open === index ? null : index);
|
|
};
|
|
|
|
return (
|
|
<div className="w-full">
|
|
{props.questions.map((question, index: number) => (
|
|
<div
|
|
key={index}
|
|
onClick={() => toggle(index)}
|
|
className={`w-full overflow-hidden border-l border-r border-t cursor-pointer ${open === index ? "bg-(--ptc) text-(--ptt)" : "bg-white"} ${index === 0 ? "rounded-t-2xl border-t border-(--ptc)" : ""} ${(index + 1) === props.questions.length ? "rounded-b-2xl border-b border-(--ptc) shadow-md" : "border-(--ptc)"}`}
|
|
>
|
|
<h4 className="text-lg font-semibold py-3 px-5 select-none">
|
|
{question.question}
|
|
</h4>
|
|
|
|
<div
|
|
className={`grid transition-[grid-template-rows,opacity] duration-300 ease-in-out ${
|
|
open === index ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
|
|
}`}
|
|
>
|
|
<div className="overflow-hidden">
|
|
<div className="px-5 pb-5 text-sm text-gray-700">
|
|
{question.answer}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
} |