sure/app/views/settings/_section.html.erb

<%# locals: (title:, subtitle: nil, content:, collapsible: false, open: true, auto_open_param: nil, status: nil, meta: nil, actions: nil, badge: nil) %>
<% if collapsible %>
  <details <%= "open" if open %>
           class="group bg-container shadow-border-xs rounded-xl p-4"
           <%= "data-controller=\"auto-open\" data-auto-open-param-value=\"#{h(auto_open_param)}\"".html_safe if auto_open_param.present? %>>
    <summary class="flex items-center justify-between gap-2 cursor-pointer rounded-lg list-none [&::-webkit-details-marker]:hidden">
      <div class="flex items-center gap-2">
        <%= icon "chevron-right", class: "text-secondary group-open:transform group-open:rotate-90 transition-transform" %>
        <div>
          <div class="flex items-center gap-2 flex-wrap">
            <h2 class="text-lg font-medium text-primary"><%= title %></h2>
            <%= badge if badge.present? %>
          </div>
          <% if subtitle.present? %>
            <p class="text-secondary text-sm"><%= subtitle %></p>
          <% end %>
        </div>
      </div>
      <% if status.present? %>
        <div class="flex items-center gap-2 shrink-0 group-open:hidden">
          <% if meta.present? %>
            <span class="text-xs text-subdued"><%= meta %></span>
          <% end %>
          <%= status %>
          <%= actions if actions.present? %>
        </div>
      <% end %>
    </summary>
    <div class="space-y-4 mt-4">
      <%= content %>
    </div>
  </details>
<% else %>
  <section class="bg-container shadow-border-xs rounded-xl p-4 space-y-4">
    <div>
      <h2 class="text-lg font-medium text-primary"><%= title %></h2>
      <% if subtitle.present? %>
        <p class="text-secondary text-sm mt-1"><%= subtitle %></p>
      <% end %>
    </div>
    <div class="space-y-4">
      <%= content %>
    </div>
  </section>
<% end %>