Tabs

Tabbed content navigation

Preview

Content 1

Props Editor

✅ JSON is valid - Click "Preview Update" to see changes

Source Code

defmodule FeenixUiWeb.Components.TabsComponent do
  use Phoenix.Component

  def render(assigns) do
    assigns = assign_new(assigns, :tabs, fn -> [] end)
    assigns = assign_new(assigns, :active, fn -> nil end)

    active_tab = Enum.find(assigns.tabs, fn tab -> tab.id == assigns.active end) || List.first(assigns.tabs)
    assigns = assign(assigns, :active_tab, active_tab)

    ~H"""
    <div>
      <div class="border-b border-gray-200">
        <nav class="-mb-px flex space-x-8">
          <%= for tab <- @tabs do %>
            <button class={[
              "py-2 px-1 border-b-2 font-medium text-sm",
              if(tab.id == @active,
                do: "border-primary-500 text-primary-600",
                else: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300")
            ]}>
              <%= tab.label %>
            </button>
          <% end %>
        </nav>
      </div>
      <div class="mt-4">
        <%= if @active_tab do %>
          <div class="p-4 bg-gray-50 rounded-lg">
            <p class="text-gray-700"><%= @active_tab.content %></p>
          </div>
        <% end %>
      </div>
    </div>
    """
  end
end