Collapsible

import * as React from 'react'
import { Collapsible } from '@hamur/react/collapsible'

export default function CollapsibleExample() {
  const [open, setOpen] = React.useState(false)
  return (
    <div className="stack">
      <Collapsible.Root className="collapsible" onOpenChange={setOpen}>
        <Collapsible.Trigger className="button">
          Recovery keys
        </Collapsible.Trigger>
        <Collapsible.Panel className="collapsible-panel">
          <ul className="keys">
            <li>alien-bean-pasta</li>
            <li>wasp-eagle-engine</li>
            <li>ping-pong-table</li>
          </ul>
        </Collapsible.Panel>
      </Collapsible.Root>
      <p className="muted">Panel is {open ? 'open' : 'closed'}</p>
    </div>
  )
}