"use client"

import { ArrowDown2 } from "iconsax-react"

import { Badge } from "@/registry/ui/badge/badge"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/registry/ui/collapsible/collapsible"

export default function CollapsibleBasic() {
  return (
    <Collapsible defaultOpen className="w-full max-w-sm gap-2">
      <div className="flex items-center justify-between">
        <CollapsibleTrigger>
          Frequency presets
          <span
            aria-hidden="true"
            className="flex text-muted-foreground transition-transform duration-(--motion-base) ease-out-quart group-data-panel-open:rotate-180 [&_svg]:size-4"
          >
            <ArrowDown2 color="currentColor" />
          </span>
        </CollapsibleTrigger>
        <Badge variant="outline">3 saved</Badge>
      </div>
      <CollapsibleContent>
        <ul className="flex flex-col gap-1.5 pt-1 font-mono text-sm text-muted-foreground">
          <li>145.800 MHz — ISS voice downlink</li>
          <li>435.100 MHz — Relay VD-8 uplink</li>
          <li>437.550 MHz — Beacon, northern array</li>
        </ul>
      </CollapsibleContent>
    </Collapsible>
  )
}
Draw

Examples
