Dropdown

<div class="flex items-center gap-4">
  <%= render Ui::Dropdown::Component.new do |dropdown| %>
    <%= dropdown.with_trigger(class: "btn btn-primary btn-iconed") do %>
      Dropdown
      <%= render Ui::Icon::Component.new icon: "chevron-down.svg", class: "size-4" %>
    <% end %>

    <%= dropdown.with_menu do |list| %>
      <%= list.with_title { "Title" } %>
      <%= list.with_element_link(title: "Settings", href: "#") %>
      <%= list.with_element_link(title: "Terms of Service", href: terms_path) %>
      <%= list.with_element_link(title: "Privacy Policy", href: privacy_path) %>
      <%= list.with_element_divider %>
      <%= list.with_element_link(title: "Sign Up", href: "#") %>
      <%= list.with_element_link(title: "Sign In", href: "#") %>
    <% end %>
  <% end %>

  <%= render Ui::Dropdown::Component.new(data: { placement: "right", triggerType: "hover", offsetSkidding: 10, offsetDistance: 10 }) do |dropdown| %>
    <%= dropdown.with_trigger(class: "btn btn-secondary btn-iconed") do %>
      Hover Dropdown with Offsets
      <%= render Ui::Icon::Component.new icon: "chevron-down.svg", class: "size-4" %>
    <% end %>

    <%= dropdown.with_menu do |list| %>
      <%= list.with_title { "Hover Menu" } %>
      <%= list.with_element_link(title: "Settings", href: "#") %>
      <%= list.with_element_divider %>
      <%= list.with_element_link(title: "Sign Out", href: "#") %>
    <% end %>
  <% end %>
</div>