74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
import { useState } from 'react';
|
|
import clsx from 'clsx';
|
|
import { Card } from '@/components/card';
|
|
import { CursorEffect } from '@/components/cursor';
|
|
import Star from '@/assets/images/thick-round-star-5.svg';
|
|
import useLocale from '@/utils/useLocale';
|
|
import { locales, questionIds } from './locales';
|
|
import styles from './faqCard.module.scss';
|
|
|
|
export function FaqCard() {
|
|
const t = useLocale(locales);
|
|
const [expanded, setExpanded] = useState<string | null>('accuracy');
|
|
|
|
return (
|
|
<section aria-label={t('title')}>
|
|
<Card
|
|
className={styles.card}
|
|
title={t('title')}
|
|
subtitle={t('description')}
|
|
classes={{ content: styles.content }}
|
|
>
|
|
<Star className={styles.star} aria-hidden="true" />
|
|
<div className={styles.questions}>
|
|
{questionIds.map((id, index) => {
|
|
const open = expanded === id;
|
|
return (
|
|
<div
|
|
key={id}
|
|
className={clsx(styles.item, open && styles.expanded)}
|
|
>
|
|
<h4>
|
|
<CursorEffect
|
|
effectForce={3}
|
|
effectDistance={48}
|
|
cursorBorderRadius={16}
|
|
cursorPadding={4}
|
|
>
|
|
<button
|
|
type="button"
|
|
id={`faq-${id}-question`}
|
|
aria-expanded={open}
|
|
aria-controls={`faq-${id}-answer`}
|
|
onClick={() => setExpanded(open ? null : id)}
|
|
className={styles.question}
|
|
>
|
|
<span className={styles.number} aria-hidden="true">
|
|
0{index + 1}
|
|
</span>
|
|
<span>{t(`${id}Question`)}</span>
|
|
<span className={styles.plus} aria-hidden="true" />
|
|
</button>
|
|
</CursorEffect>
|
|
</h4>
|
|
<div
|
|
id={`faq-${id}-answer`}
|
|
role="region"
|
|
aria-labelledby={`faq-${id}-question`}
|
|
aria-hidden={!open}
|
|
inert={!open}
|
|
className={styles.answer}
|
|
>
|
|
<div>
|
|
<p>{t(`${id}Answer`)}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</Card>
|
|
</section>
|
|
);
|
|
}
|