itsfinniii/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update FAQ list component

Browse Source
This commit is contained in:
itsfinniii
2026-03-28 15:55:57 +01:00
parent 8afacdbe7a
commit a6e3a48313
1 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
astro/src/components/web/subcomponents/QuestionList.tsx
View File

@@ -8,27 +8,30 @@ export function QuestionList(props: { questions: FrequentlyAskedQuestion[]; }) {
}; };
return ( return (
<div class="w-full"> <div className="w-full">
{ props.questions.map((question, index: number) => ( {props.questions.map((question, index: number) => (
<div <div
onClick={() => toggle(index)}
key={index} key={index}
className={`w-full overflow-hidden border-l border-r border-t ${open === index && "bg-amber-200"} ${index !== 0 && (index + 1 !== props.questions.length) && "border-amber-300"} ${index === 0 && "rounded-t-2xl border-t border-amber-300"} ${(index + 1) === props.questions.length && "rounded-b-2xl border-b border-amber-300 shadow-md"}`} 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 class={`text-lg font-semibold transition py-3 px-5 select-none cursor-pointer`}>{ question.question }</h4> <h4 className="text-lg font-semibold py-3 px-5 select-none">
{question.question}
</h4>
<div <div
className={`grid transition-all duration-300 ease-in-out ${ className={`grid transition-[grid-template-rows,opacity] duration-300 ease-in-out ${
open === index ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0" open === index ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
}`} }`}
> >
<div className="overflow-hidden"> <div className="overflow-hidden">
<div className="px-5 py-3 bg-white text-sm text-gray-700"> <div className="px-5 pb-5 text-sm text-gray-700">
{question.answer} {question.answer}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
)) } ))}
</div> </div>
) );
} }