26 lines
786 B
TypeScript
26 lines
786 B
TypeScript
import { FC, PropsWithChildren } from 'react'
|
|
import styles from './Collapsible.module.css'
|
|
import cx from 'classnames'
|
|
import typography from '../../../styles/typography.module.css'
|
|
|
|
interface Props {
|
|
id: string
|
|
className?: string
|
|
}
|
|
|
|
export const Collapsible: FC<PropsWithChildren<Props>> = ({ id, className, children }) => {
|
|
return (
|
|
<div className={cx(styles.collapsible, className)}>
|
|
<input id={id} className={styles.toggle} type='checkbox' defaultChecked={true} />
|
|
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
|
|
<label
|
|
htmlFor={id}
|
|
id={id}
|
|
className={cx(styles.label, typography.displaySmall)}
|
|
defaultChecked={true}
|
|
/>
|
|
<div className={styles.content}>{children}</div>
|
|
</div>
|
|
)
|
|
}
|