WIP contribution nav

app/components/header_tab_link_component.html.erb

@@ -0,0 +1,3 @@
+<%= link_to @path, class: @link_class do %>
+  <%= @name %>
+<% end %>

app/components/header_tab_link_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+class HeaderTabLinkComponent < ViewComponent::Base
+  def initialize(name:, path:, active: false, disabled: false)
+    @name = name
+    @path = path
+    @active = active
+    @disabled = disabled
+    @link_class = class_names_link(path)
+  end
+
+  def class_names_link(path)
+    common = "block md:inline-block px-5 py-2 rounded-md font-medium text-base md:text-xl"
+    if @active
+      "#{common} bg-gray-900/50 text-white"
+    else
+      "#{common} text-gray-300 hover:bg-gray-900/30 hover:text-white active:bg-gray-900/30 active:text-white"
+    end
+  end
+end

app/components/header_with_tabs_component.html.erb

@@ -0,0 +1,12 @@
+<header class="py-10">
+  <div class="max-w-6xl md:flex md:gap-x-10 mx-auto px-4 sm:px-6 lg:px-8">
+    <% if @title.present? %>
+    <h1 class="text-3xl font-bold text-white">
+      <%= @title %>
+    </h1>
+    <% end %>
+    <nav class="md:grow flex gap-x-4 <%= @title.present? ? "justify-end" : "justify-start" %>" aria-label="Tabs">
+      <%= render partial: @tabnav_partial %>
+    </nav>
+  </div>
+</header>

app/components/header_with_tabs_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class HeaderWithTabsComponent < ViewComponent::Base
+  def initialize(title: nil, tabnav_partial:)
+    @title = title
+    @tabnav_partial = tabnav_partial
+  end
+end