<%= render ModalComponent.new do %>

  <p>A modal with no header or footer — just wrapped content.</p>

<% end %>

<%= render ModalComponent.new do |m| %>

  <% m.with_header do |h| %>

    <% h.with_tabs do |t| %>

      <% t.with_tab(label: "Details", href: "#", selected: true) %>

      <% t.with_tab(label: "Activity", href: "#") %>

    <% end %>

  <% end %>

  <p>Any page or content goes here.</p>

  <% m.with_footer do |f| %>

    <% f.with_action { render ButtonComponent.new(label: "Save", size: "sm", type: "submit") } %>

  <% end %>

<% end %>

<%= render ModalComponent.new do |m| %>

  <% m.with_header(title: "Title") %>

  <p>Any page or content goes here.</p>

  <% m.with_footer do |f| %>

    <% f.with_action { render ButtonComponent.new(label: "Save", size: "sm", type: "submit") } %>

  <% end %>

<% end %>