HeroUI Dropdown

"use client"

import { useState } from "react"

import {
  Button,
  Dropdown,
  Header,
  Label,
  type Selection,
} from "@/components/ui/heroui-dropdown"

export default function Demo() {
  const [selected, setSelected] = useState<Selection>(new Set(["apple"]))

  return (
    <div className="flex min-h-[360px] items-center justify-center p-6">
      <Dropdown>
        <Button aria-label="Menu" variant="secondary">
          Fruit
        </Button>
        <Dropdown.Popover className="min-w-[256px]">
          <Dropdown.Menu
            selectedKeys={selected}
            selectionMode="single"
            onSelectionChange={setSelected}
          >
            <Dropdown.Section>
              <Header>Select a fruit</Header>
              <Dropdown.Item id="apple" textValue="Apple">
                <Dropdown.ItemIndicator />
                <Label>Apple</Label>
              </Dropdown.Item>
              <Dropdown.Item id="banana" textValue="Banana">
                <Dropdown.ItemIndicator />
                <Label>Banana</Label>
              </Dropdown.Item>
              <Dropdown.Item id="cherry" textValue="Cherry">
                <Dropdown.ItemIndicator />
                <Label>Cherry</Label>
              </Dropdown.Item>
            </Dropdown.Section>
            <Dropdown.Item id="orange" textValue="Orange">
              <Dropdown.ItemIndicator />
              <Label>Orange</Label>
            </Dropdown.Item>
            <Dropdown.Item id="pear" textValue="Pear">
              <Dropdown.ItemIndicator />
              <Label>Pear</Label>
            </Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown.Popover>
      </Dropdown>
    </div>
  )
}