Skip to content

Instantly share code, notes, and snippets.

@chrisortman
Created November 16, 2021 20:07
Show Gist options
  • Save chrisortman/d7b81d4e8a19566b62e9e44cda2d7d90 to your computer and use it in GitHub Desktop.
Save chrisortman/d7b81d4e8a19566b62e9e44cda2d7d90 to your computer and use it in GitHub Desktop.
<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>
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment