Change donations to contrbutions, add tabbed nav

Introduces components for tabbed navigation and adds a tab menu and item
for non-financial contributions to the donations/contributions page.

app/components/main_with_tabnav_component.html.erb

@@ -0,0 +1,14 @@
+<main class="w-full max-w-6xl mx-auto pb-12 px-4 md:px-6 lg:px-8">
+  <div class="bg-white rounded-lg shadow">
+    <div class="px-6 sm:px-12 pt-2 sm:pt-4">
+      <div class="border-b border-gray-200">
+        <nav class="-mb-px flex" aria-label="Tabs">
+          <%= render partial: @tabnav_partial %>
+        </nav>
+      </div>
+    </div>
+    <div class="px-6 sm:px-12 py-8 sm:py-12">
+      <%= content %>
+    </div>
+  </div>
+</main>

app/components/main_with_tabnav_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class MainWithTabnavComponent < ViewComponent::Base
+  def initialize(tabnav_partial:)
+    @tabnav_partial = tabnav_partial
+  end
+end

app/components/tabnav_link_component.html.erb

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

app/components/tabnav_link_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class TabnavLinkComponent < 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)
+    if @active
+      "border-indigo-500 text-indigo-600 w-1/2 py-4 px-1 text-center border-b-2"
+    elsif @disabled
+      "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 w-1/2 py-4 px-1 text-center border-b-2"
+    else
+      "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 w-1/2 py-4 px-1 text-center border-b-2"
+    end
+  end
+end

app/controllers/contributions/donations_controller.rb

@@ -1,4 +1,4 @@
-class DonationsController < ApplicationController
+class Contributions::DonationsController < ApplicationController
   before_action :require_user_signed_in
 
   # GET /donations

app/controllers/contributions/projects_controller.rb

@@ -0,0 +1,8 @@
+class Contributions::ProjectsController < ApplicationController
+  before_action :require_user_signed_in
+
+  # GET /contributions
+  def index
+    @current_section = :contributions
+  end
+end

app/views/contributions/donations/index.html.erb

@@ -1,6 +1,6 @@
-<%= render HeaderComponent.new(title: "Donations") %>
+<%= render HeaderComponent.new(title: "Contributions") %>
 
-<%= render MainSimpleComponent.new do %>
+<%= render MainWithTabnavComponent.new(tabnav_partial: "shared/tabnav_contributions") do %>
   <section>
     <p class="mb-12">
       Your financial contributions to the development and upkeep of Kosmos
@@ -34,7 +34,9 @@
       </ul>
     <% else %>
       <p class="text-gray-500">
-        No donations to show.
+        The donation process is not automated yet. Please
+        <a href="https://wiki.kosmos.org/Main_Page#Community_.2F_Getting_in_touch_.2F_Getting_involved" class="ks-text-link" target="_blank">contact us</a>
+        if you'd like to contribute this way right now.
       </p>
     <% end %>
   </section>

app/views/contributions/projects/index.html.erb

@@ -0,0 +1,16 @@
+<%= render HeaderComponent.new(title: "Contributions") %>
+
+<%= render MainWithTabnavComponent.new(tabnav_partial: "shared/tabnav_contributions") do %>
+  <section>
+    <p class="mb-8">
+      Project contributions are how we develop and run all Kosmos software and
+      services. Everything we create and provide is free and open-source
+      software, even the page you're looking at right now!
+    </p>
+    <p>
+      Soon you will find a summary of your contributions here. Until then,
+      please refer to the
+      <a href="https://kredits.kosmos.org/" class="ks-text-link" target="_blank">Kredits dashboard</a>.
+    </p>
+  </section>
+<% end %>

app/views/donations/index.json.jbuilder

@@ -1 +0,0 @@
-json.array! @donations, partial: "donations/donation", as: :donation

app/views/shared/_main_nav.html.erb

@@ -1,9 +1,9 @@
 <%= link_to "Services", root_path,
       class: main_nav_class(@current_section, :dashboard) %>
+<%= link_to "Contributions", contributions_donations_path,
+      class: main_nav_class(@current_section, :contributions) %>
 <%= link_to "Invitations", invitations_path,
       class: main_nav_class(@current_section, :invitations) %>
-<%= link_to "Donations", donations_path,
-      class: main_nav_class(@current_section, :contributions) %>
 <%= link_to "Wallet", wallet_path,
       class: main_nav_class(@current_section, :wallet) %>
 <%= link_to "Settings", security_path,

app/views/shared/_tabnav_contributions.html.erb

@@ -0,0 +1,8 @@
+<%= render TabnavLinkComponent.new(
+  name: "Donations", path: contributions_donations_path,
+  active: current_page?(contributions_donations_path)
+) %>
+<%= render TabnavLinkComponent.new(
+  name: "Projects", path: contributions_projects_path,
+  active: current_page?(contributions_projects_path)
+) %>

config/routes.rb

@@ -15,9 +15,13 @@ Rails.application.routes.draw do
 
   get 'security', to: 'security#index'
 
-  resources :invitations, only: ['index', 'show', 'create', 'destroy']
+  namespace :contributions do
+    root to: 'donations#index'
+    get 'projects', to: 'projects#index'
+    resources :donations, only: ['index']
+  end
 
-  resources :donations
+  resources :invitations, only: ['index', 'show', 'create', 'destroy']
 
   get 'wallet', to: 'wallet#index'
   get 'wallet/transactions', to: 'wallet#transactions'