Dropdown

<.dropdown label="Edit">
  <.dropdown_button>
    <.icon name="hero-user-circle" class="icon" /> Profile
  </.dropdown_button>
  <.dropdown_button>
    <.icon name="hero-users" class="icon" /> Community
  </.dropdown_button>
  <.dropdown_button>
    <.icon name="hero-credit-card" class="icon" /> Subscription
  </.dropdown_button>
  <.dropdown_button>
    <.icon name="hero-cog-6-tooth" class="icon" /> Settings
  </.dropdown_button>
  <.dropdown_separator />
  <.dropdown_button>
    <.icon name="hero-question-mark-circle" class="icon" /> Help Center
  </.dropdown_button>
  <.dropdown_button class="text-red-700 data-highlighted:bg-red-50">
    <.icon name="hero-arrow-right-on-rectangle" class="icon" /> Sign Out
  </.dropdown_button>
</.dropdown>

<.dropdown>
  <:toggle>
    <button class="flex items-center gap-x-2 hover:bg-accent in-aria-expanded:bg-accent rounded-lg p-2">
      <img src={~p"/images/human-avatar-01.png"} alt="User" class="size-6 rounded-lg" />
      <div class="text-sm text-gray-800 font-semibold dark:text-gray-200">John Doe</div>
      <.icon name="hero-chevron-down" class="size-4 in-aria-expanded:rotate-180 transition-transform" />
    </button>
  </:toggle>
  <.dropdown_button>Profile</.dropdown_button>
  <.dropdown_button>Billing</.dropdown_button>
  <.dropdown_button>Settings</.dropdown_button>
</.dropdown>

<!-- Links -->
 <.dropdown>
  <.dropdown_link navigate="/components/dropdown">Dashboard</.dropdown_link>
  <.dropdown_link patch="/components/dropdown">Team</.dropdown_link>
  <.dropdown_link href="https://fluxonui.com" target="_blank">External Link</.dropdown_link>
</.dropdown>

<!-- Buttons -->
<.dropdown>
  <.dropdown_button phx-click="save">Save</.dropdown_button>
  <.dropdown_button phx-click="export">Export</.dropdown_button>
  <.dropdown_button phx-click="duplicate">Duplicate</.dropdown_button>
  <.dropdown_button phx-click="delete">Delete</.dropdown_button>
</.dropdown>

<.dropdown class="w-64">
  <.dropdown_custom class="flex items-center p-2">
    <div class="w-9 h-9 bg-blue-500 rounded-full flex items-center justify-center text-white font-semibold">
      EJ
    </div>
    <div class="flex flex-col ml-3">
      <span class="text-sm font-medium">Emma Johnson</span>
      <span class="text-xs text-zinc-500">emma@acme.com</span>
    </div>
  </.dropdown_custom>

  <.dropdown_separator />

  <.dropdown_header>Account</.dropdown_header>
  <.dropdown_link navigate="/profile">Profile</.dropdown_link>
  <.dropdown_link navigate="/billing">Billing</.dropdown_link>

  <.dropdown_header>Support</.dropdown_header>
  <.dropdown_link navigate="/help">Documentation</.dropdown_link>
  <.dropdown_link navigate="/contact">Contact Us</.dropdown_link>

  <.dropdown_separator />

  <.dropdown_link href="/logout" method="delete" class="text-red-600">
    Sign Out
  </.dropdown_link>
</.dropdown>

<.dropdown>
  <.dropdown_button>Available Action</.dropdown_button>
  <.dropdown_button disabled>Disabled Action</.dropdown_button>
  <.dropdown_separator />
  <.dropdown_link navigate="/settings">Settings</.dropdown_link>
  <.dropdown_link navigate="/admin" data-disabled>Admin Panel</.dropdown_link>
</.dropdown>

<.dropdown placement="top" label="Top">
  <.dropdown_button>Bottom Start</.dropdown_button>
  <.dropdown_button>Another Option</.dropdown_button>
</.dropdown>

<.dropdown
  animation_enter="opacity-100 translate-y-0"
  animation_leave="opacity-0 -translate-y-2"
>
  <.dropdown_button>Profile</.dropdown_button>
  <.dropdown_button>Billing</.dropdown_button>
  <.dropdown_button>Settings</.dropdown_button>
</.dropdown>

<.dropdown open_on_hover hover_open_delay={0} hover_close_delay={100}>
  <.dropdown_link navigate="/profile">Profile</.dropdown_link>
  <.dropdown_link navigate="/settings">Settings</.dropdown_link>
  <.dropdown_link navigate="/help">Help</.dropdown_link>
</.dropdown>

<.dropdown>
  <:toggle>
    <button class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-100">
      <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full"></div>
      <span class="text-sm font-medium">Sarah Wilson</span>
      <.icon name="hero-chevron-down" class="w-4 h-4 text-gray-500" />
    </button>
  </:toggle>

  <.dropdown_custom class="px-3 py-2 border-b">
    <div class="font-medium text-sm">Sarah Wilson</div>
    <div class="text-xs text-gray-500">sarah@example.com</div>
  </.dropdown_custom>

  <.dropdown_link navigate="/profile">
    <.icon name="hero-user-circle" class="w-4 h-4" />
    My Profile
  </.dropdown_link>
  <.dropdown_link navigate="/dashboard">
    <.icon name="hero-squares-2x2" class="w-4 h-4" />
    Dashboard
  </.dropdown_link>
  <.dropdown_link navigate="/settings">
    <.icon name="hero-cog-6-tooth" class="w-4 h-4" />
    Settings
  </.dropdown_link>

  <.dropdown_separator />

  <.dropdown_link navigate="/billing">
    <.icon name="hero-credit-card" class="w-4 h-4" />
    Billing
  </.dropdown_link>
  <.dropdown_link navigate="/support">
    <.icon name="hero-question-mark-circle" class="w-4 h-4" />
    Support
  </.dropdown_link>

  <.dropdown_separator />

  <.dropdown_button phx-click="logout" class="text-red-600">
    <.icon name="hero-arrow-right-on-rectangle" class="w-4 h-4" />
    Sign Out
  </.dropdown_button>
</.dropdown>