<%= render TabsComponent.new( variant: :unstyled, active_tab: "tab1", active_btn_classes: "bg-white text-primary", inactive_btn_classes: "text-secondary", ) do |tabs| %>
<%= tabs.with_nav(classes: "flex flex-col py-2 px-3 border-r border-secondary") do |nav| %> <%= nav.with_btn(id: "tab1", label: "Tab 1", classes: "px-2 py-1 rounded-md w-full whitespace-nowrap") %> <%= nav.with_btn(id: "tab2", label: "Tab 2", classes: "px-2 py-1 rounded-md w-full whitespace-nowrap") %> <% end %>
<%= tabs.with_panel(tab_id: "tab1") do %> <%= content_tag(:p, "Content for tab 1") %> <% end %> <%= tabs.with_panel(tab_id: "tab2") do %> <%= content_tag(:p, "Content for tab 2") %> <% end %>
Footer
<% end %>