I plan to refactor "GitHub Runners" page similar to "Networking" page, using the same tab bar component. Additionally, there's a minor issue with border rounding. The middle corners shouldn't be rounded.
16 lines
852 B
Text
16 lines
852 B
Text
<div class="sm:block mb-6">
|
|
<nav class="isolate flex divide-x divide-gray-200 rounded-lg shadow" aria-label="Tabs">
|
|
<% tabs.each_with_index do |(label, url), i| %>
|
|
<a
|
|
href="<%= url %>"
|
|
class="group flex items-center justify-center relative min-w-0 flex-1 overflow-hidden <%= (i == 0) ? "rounded-l-lg" : ((i == tabs.size - 1) ? "rounded-r-lg" : "") %> px-4 py-4 text-center text-sm bg-white font-medium focus:z-10 <%= (request.path == url) ? "text-orange-600 hover:text-orange-700 hover:bg-orange-50" : "text-gray-500 hover:text-orange-500 hover:bg-orange-50" %>"
|
|
>
|
|
<span><%= label %></span>
|
|
<span
|
|
aria-hidden="true"
|
|
class="absolute inset-x-0 bottom-0 h-0.5 <%= (request.path == url) ? "bg-orange-600" : "bg-transparent" %>"
|
|
></span>
|
|
</a>
|
|
<% end %>
|
|
</nav>
|
|
</div>
|