Collapsible

npx axis-cli add collapsible

import { useState } from 'react'
import {
  Button,
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@axis-ds/ui-react'

export function Example() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
      <div className="flex items-center justify-between space-x-4 px-4">
        <h4 className="text-sm font-semibold">@axis-ds/ui-react</h4>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="sm">
            {isOpen ? '접기' : '펼치기'}
          </Button>
        </CollapsibleTrigger>
      </div>
      <div className="rounded-md border px-4 py-3 text-sm">
        @axis-ds/tokens
      </div>
      <CollapsibleContent className="space-y-2">
        <div className="rounded-md border px-4 py-3 text-sm">
          @axis-ds/theme
        </div>
        <div className="rounded-md border px-4 py-3 text-sm">
          @axis-ds/cli
        </div>
      </CollapsibleContent>
    </Collapsible>
  )
}