-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
FAQItem.tsx
46 lines (41 loc) · 1.1 KB
/
FAQItem.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import type React from 'react'
import { useState } from 'react'
type FAQItemProps = {
question: string
children: React.ReactNode
}
/**
* FAQItem component displays a frequently asked question and its answer.
*
* @component
* @param {FAQItemProps} props - The props for the FAQItem component.
* @param {string} props.question - The question to be displayed.
* @param {ReactNode} props.children - The answer to the question.
* @returns {JSX.Element} The rendered FAQItem component.
*/
const FAQItem: React.FC<FAQItemProps> = ({ question, children }) => {
const [isActive, setIsActive] = useState(false)
/**
* Toggles the active state of the FAQItem.
*/
const toggleIsActive = () => {
setIsActive(!isActive)
}
return (
<div
className={`faq-item ${isActive ? 'active' : ''}`}
role="button"
tabIndex={0}
onClick={toggleIsActive}
onKeyDown={e => {
if (e.key === 'Enter' || e.key === ' ') {
toggleIsActive()
}
}}
>
<div className="faq-question">{question}</div>
{isActive ? <div className="faq-answer">{children}</div> : null}
</div>
)
}
export default FAQItem