All files / src/components Collapse.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
 
 
 
 
 
 
 
4x
8x
8x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useId } from 'react'
 
export interface CollapseProps {
  title: string
  children?: React.ReactNode
}
 
const Collapse = ({ title, children }: CollapseProps) => {
  const id = useId()
  return (
    <details
      aria-describedby={`${id}-details-summary`}
      className="mb-3 max-w-prose rounded border p-3"
    >
      <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>
      {children}
    </details>
  )
}
 
export default Collapse