<Dropdown label="Dropdown button">
  <DropdownItem>Dashboard</DropdownItem>
  <DropdownItem>Settings</DropdownItem>
  <DropdownItem>Earnings</DropdownItem>
  <DropdownItem>Sign out</DropdownItem>
</Dropdown>

<Dropdown label="Dropdown button">
  <DropdownItem>Dashboard</DropdownItem>
  <DropdownItem>Settings</DropdownItem>
  <DropdownItem>Earnings</DropdownItem>
  <DropdownDivider />
  <DropdownItem>Separated link</DropdownItem>
</Dropdown>

<Dropdown label="Dropdown button">
  <DropdownHeader>
    <span class="block text-sm"> Bonnie Green </span>
    <span class="block truncate text-sm font-medium"> name@flowbite.com </span>
  </DropdownHeader>
  <DropdownItem>Dashboard</DropdownItem>
  <DropdownItem>Settings</DropdownItem>
  <DropdownItem>Earnings</DropdownItem>
  <DropdownDivider />
  <DropdownItem>Sign out</DropdownItem>
</Dropdown>

<Dropdown label="Dropdown" inline={true}>
  <DropdownItem>Dashboard</DropdownItem>
  <DropdownItem>Settings</DropdownItem>
  <DropdownItem>Earnings</DropdownItem>
  <DropdownItem>Sign out</DropdownItem>
</Dropdown>

<script>
  const onClick = (num) => (e) => alert(num);
</script>

<Dropdown label="Dropdown">
  <DropdownItem on:click={onClick(1)}>Dashboard</DropdownItem>
  <DropdownItem on:click={onClick(2)}>Settings</DropdownItem>
  <DropdownItem on:click={onClick(3)}>Earnings</DropdownItem>
  <DropdownItem on:click={onClick(4)}>Sign out</DropdownItem>
</Dropdown>

<div class="flex items-center gap-4">
  <Dropdown label="Small dropdown" size="sm">
    <DropdownItem>Dashboard</DropdownItem>
    <DropdownItem>Settings</DropdownItem>
    <DropdownItem>Earnings</DropdownItem>
    <DropdownItem>Sign out</DropdownItem>
  </Dropdown>
  <Dropdown label="Large dropdown" size="lg">
    <DropdownItem>Dashboard</DropdownItem>
    <DropdownItem>Settings</DropdownItem>
    <DropdownItem>Earnings</DropdownItem>
    <DropdownItem>Sign out</DropdownItem>
  </Dropdown>
</div>