Dropdown

<%= render(Zui::Dropdown.new) do |dd| %>
  <%= dd.trigger do %>
    <%= zui('button') do %>
      Account
      <%= zui_icon("chevrons-down", class: "h-4 w-4") %>
    <% end %>
  <% end %>
  <%= dd.body do |body| %>
    <%= body.title {"My Account"} %>
    <%= body.separator %>
    <%= body.item(icon: "user") { "Profile" } %>
    <%= body.item(icon: "settings")  { "Settings" } %>
    <%= body.item(icon: "credit-card") { "Billing" } %>
    <%= body.separator %>
    <%= body.item(icon: "users") { "Team" } %>
    <%= body.item(icon: "user-plus") { "Add user" } %>
    <%= body.separator %>
    <%= body.item(icon: "log-out") { link_to "Home", root_path } %>
  <% end %>
<% end %>

<%= render(Zui::Dropdown.new) do |dd| %>
  <%= dd.trigger do %>
    <%= zui_icon("chevrons-down", class: "h-6 w-6 text-accent-text") %>
  <% end %>
  <%= dd.body do |body| %>
    <%= body.title {"My Account"} %>
    <%= body.separator %>
    <%= body.item(icon: "user") { "Profile" } %>
    <%= body.item(icon: "settings")  { "Settings" } %>
    <%= body.item(icon: "credit-card") { "Billing" } %>
    <%= body.separator %>
    <%= body.item(icon: "users") { "Team" } %>
    <%= body.item(icon: "user-plus") { "Add user" } %>
    <%= body.separator %>
    <%= body.item(icon: "log-out") { link_to "Home", root_path } %>
  <% end %>
<% end %>

<%= render(Zui::Dropdown.new(close_on_click: false)) do |dd| %>
  <%= dd.trigger do %>
    <%= zui('button') do %>
      Account
      <%= zui_icon("chevrons-down", class: "h-4 w-4") %>
    <% end %>
  <% end %>
  <%= dd.body do |body| %>
    <%= body.title {"My Account"} %>
    <%= body.separator %>
    <%= body.item(icon: "user") { "Profile" } %>
    <%= body.item(icon: "settings")  { "Settings" } %>
    <%= body.item(icon: "credit-card") { "Billing" } %>
    <%= body.separator %>
    <%= body.item(icon: "users") { "Team" } %>
    <%= body.item(icon: "user-plus") { "Add user" } %>
    <%= body.separator %>
    <%= body.item(icon: "log-out") { link_to "Home", root_path } %>
  <% end %>
<% end %>