<.dropdown id="dropdown-single-default" text="Dropdown">
  <.dropdown_item text="First item"/>
  <.dropdown_item text="Second item"/>
</.dropdown>

<.dropdown id="dropdown-single-outline" text="Outline" outline>
  <.dropdown_item text="First item"/>
  <.dropdown_item text="Second item"/>
</.dropdown>

<.dropdown id="dropdown-single-single" single text="Single">
  <.dropdown_item text="First item"/>
  <.dropdown_item text="Second item"/>
</.dropdown>

<.dropdown
  id="dropdown-colors-and-icon-default"
  text="Color dropdown"
  color={:default}
  icon="fad fa-cake"
>
  <.dropdown_item text="First item"/>
  <.dropdown_item text="Second item"/>
</.dropdown>
<.dropdown
  id="dropdown-colors-and-icon-primary"
  text="Color dropdown"
  color={:primary}
  icon="fad fa-cake"
>
  <.dropdown_item text="First item"/>
  <.dropdown_item text="Second item"/>
</.dropdown>
<.dropdown
  id="dropdown-colors-and-icon-danger"
  text="Color dropdown"
  color={:danger}
  icon="fad fa-cake"
>
  <.dropdown_item text="First item"/>
  <.dropdown_item text="Second item"/>
</.dropdown>
<.dropdown
  id="dropdown-colors-and-icon-success"
  text="Color dropdown"
  color={:success}
  icon="fad fa-cake"
>
  <.dropdown_item text="First item"/>
  <.dropdown_item text="Second item"/>
</.dropdown>

<.dropdown
  id="dropdown-sizes-default"
  size={:default}
  text="Default or small"
  icon="fa fa-maximize"
>
  <.dropdown_item text="First item"/>
  <.dropdown_item text="Second item"/>
</.dropdown>
<.dropdown
  id="dropdown-sizes-small"
  size={:small}
  text="Default or small"
  icon="fa fa-maximize"
>
  <.dropdown_item text="First item"/>
  <.dropdown_item text="Second item"/>
</.dropdown>

<.dropdown id="dropdown-single-loading" loading text="Generate" color={:default}>
  <.dropdown_item
    loading={true}
    text="Generate"
  />
</.dropdown>

<.dropdown
  id="dropdown-single-items-with-link"
  text="Dare you?"
  color={:default}
  href="https://www.youtube.com/watch?v=AfeAhCWaMD0"
  icon="fab fa-youtube fa-lg text-red-500"
>
  <.dropdown_item
    text="Bamba"
    icon="fab fa-youtube fa-lg text-red-500"
    href="https://www.youtube.com/watch?v=AfeAhCWaMD0"
  />
  <.dropdown_item
    text="sad"
    icon="fab fa-youtube fa-lg text-red-500"
    href="https://www.youtube.com/watch?v=AfeAhCWaMD0"
  />
</.dropdown>