Changeset View

Standalone View

Show All 29 Lines	function KeyserverFAQ(): React.Node {

const keyserverFAQ = React.useMemo(() => {		const keyserverFAQ = React.useMemo(() => {
return faqData.map((faq, index) => {		return faqData.map((faq, index) => {
const answerContainerClassName = classNames({		const answerContainerClassName = classNames({
[css.answerContainer]: true,		[css.answerContainer]: true,
[css.activeAnswerContainer]: activeFAQIndex === index,		[css.activeAnswerContainer]: activeFAQIndex === index,
});		});

		const iconClassName = classNames({
		[css.icon]: true,
		[css.activeIcon]: activeFAQIndex === index,
		});

return (		return (
<div		<div
key={index}		key={index}
className={css.faqItemContainer}		className={css.faqItemContainer}
onClick={() => onClickFAQItem(index)}		onClick={() => onClickFAQItem(index)}
>		>
<div className={css.questionContainer}>		<div className={css.questionContainer}>
<p className={questionClassName}>{faq.question}</p>		<p className={questionClassName}>{faq.question}</p>
<FontAwesomeIcon		<FontAwesomeIcon
size="sm"		size="sm"
className={css.icon}		className={iconClassName}
icon={faChevronDown}		icon={faChevronDown}
/>		/>
</div>		</div>
<div className={answerContainerClassName}>{faq.answer}</div>		<div className={answerContainerClassName}>{faq.answer}</div>
</div>		</div>
);		);
});		});
}, [activeFAQIndex, onClickFAQItem, questionClassName]);		}, [activeFAQIndex, onClickFAQItem, questionClassName]);
Show All 10 Lines