tab_bar_component.html.erb

<div class="lg:hidden">

  <label for="selected-tab" class="sr-only">Select a tab</label>
  <select id="selected-tab" name="selected-tab" class="block w-full py-2 pl-3 pr-10 mt-1 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md">
    <% tabs.each do |t| %>
      <option><%= t.text %></option>
    <% end %>
  </select>
</div>
<div class="hidden lg:block">
  <div class="border-b border-gray-200">
    <nav class="flex -mb-px space-x-8">
      <!-- Current: "border-purple-500 text-purple-600", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
      <% tabs.each do |tab| %>
        <% if selected?(tab) %>
        <%= link_to tab.text, "#", class: "px-1 py-4 text-sm font-medium text-purple-600 border-b-2 border-purple-500 whitespace-nowrap" %>
        <% else %>
        <%= link_to tab.text, "#", class: "px-1 py-4 text-sm font-medium text-gray-500 border-b-2 border-transparent hover:border-gray-300 hover:text-gray-700 whitespace-nowrap" %>
        <% end %>
      <% end %>


    </nav>
  </div>
</div>

tab_bar_component.rb

class TabBarComponent < ViewComponent::Base

  renders_many :tabs, lambda { |label, href:|
    Tab.new(label, href: href)
  }

  def initialize
    @options = []
  end

  def options
    @options
  end

  def selected? foo
    false
  end

  class Tab < ViewComponent::Base
    attr_accessor :text, :href
    def initialize(text, href:)
      @text = text
      @href = href
    end
  end
end