mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-07-29 01:59:38 +02:00
30 lines
1 KiB
Text
30 lines
1 KiB
Text
|
<%= render TabsComponent.new(
|
||
|
|
variant: :unstyled,
|
||
|
|
active_tab: "tab1",
|
||
|
|
active_btn_classes: "bg-white text-primary",
|
||
|
|
inactive_btn_classes: "text-secondary",
|
||
|
|
) do |tabs| %>
|
||
|
|
<div class="flex border border-secondary rounded-lg h-full max-w-[400px]">
|
||
|
|
<%= 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 %>
|
||
|
|
|
||
|
|
<div class="flex flex-col w-full">
|
||
|
|
<div class="h-[200px] p-4">
|
||
|
|
<%= 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 %>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="w-full border-t border-secondary p-4">
|
||
|
|
Footer
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<% end %>
|