"use client"

import * as React from "react"
import { ArrowDown2 } from "iconsax-react"

import { Button } from "@/registry/ui/button/button"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/registry/ui/dropdown-menu/dropdown-menu"

export default function DropdownMenuBasicDemo() {
  const [autoRepeat, setAutoRepeat] = React.useState(true)

  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        Relay actions
        <span aria-hidden="true" className="flex text-muted-foreground">
          <ArrowDown2 color="currentColor" />
        </span>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
        <DropdownMenuGroup>
          <DropdownMenuLabel>Relay KX-42</DropdownMenuLabel>
          <DropdownMenuItem>Inspect relay</DropdownMenuItem>
          <DropdownMenuItem>Duplicate relay</DropdownMenuItem>
          <DropdownMenuItem>Copy callsign</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuCheckboxItem
          checked={autoRepeat}
          onCheckedChange={setAutoRepeat}
        >
          Auto-repeat beacon
        </DropdownMenuCheckboxItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">
          Decommission relay
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
Draw

Examples
