Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 5x 5x 10x 10x | import { useId } from 'react'
const variants = {
fitWidth: 'w-fit',
fullWidth: 'w-full',
halfWidth: 'w-6/12',
slim: 'max-w-prose text-base',
default: 'max-w-prose',
}
export interface CollapseProps {
title: string
children?: React.ReactNode
variant?: keyof typeof variants
}
const Collapse = ({ title, children, variant = 'default' }: CollapseProps) => {
const id = useId()
return (
<details
aria-describedby={`${id}-details-summary`}
className={`mb-3 rounded border p-3 ${variants[variant]}`}
>
<summary
id={`${id}-details-summary`}
className={
'cursor-pointer text-blue-light hover:text-link-selected hover:underline focus:text-link-selected focus:underline'
}
>
{title}
</summary>
<div className="pt-3">{children}</div>
</details>
)
}
export default Collapse
|