Tabs MVP - working but needs final touches

app/javascript/controllers/tabs_controller.js

@@ -0,0 +1,47 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["tab", "panel"]
+
+  connect() {
+    console.log("Tabs controller connected!")
+    this.showTab(this.tabTargets[0])
+  }
+
+  change(event) {
+    event.preventDefault()
+    console.log("Click event triggered")
+    console.log("Current classes:", event.currentTarget.classList.toString())
+    this.showTab(event.currentTarget)
+  }
+
+  showTab(selectedTab) {
+    console.log("showTab called with:", selectedTab.id)
+    console.log("Classes before change:", selectedTab.classList.toString())
+
+    const activeTab = this.tabTargets.find(tab => 
+      tab.classList.contains("tab-active")
+    )
+
+    if (activeTab === selectedTab) {
+      console.log("Same tab clicked, returning")
+      return 
+    }
+
+    if (activeTab) {
+      console.log("Deactivating current tab:", activeTab.id)
+      activeTab.classList.remove("tab-active")
+      activeTab.classList.add("tab-inactive")
+
+      const activePanelId = activeTab.id.replace('-tab', '-tab-panel')
+      document.getElementById(activePanelId).hidden = true
+    }
+
+    console.log("Activating new tab:", selectedTab.id)
+    selectedTab.classList.remove("tab-inactive")
+    selectedTab.classList.add("tab-active")
+
+    const selectedPanelId = selectedTab.id.replace('-tab', '-tab-panel')
+    document.getElementById(selectedPanelId).hidden = false
+  }
+} 

app/javascript/stylesheets/custom/basics.css

@@ -72,4 +72,28 @@
     background-color: rgba(255, 255, 255, 0.639);
     z-index: 10;
   }
-}
+
+  .tab {
+    @apply whitespace-nowrap py-2 px-4 font-medium;
+  }
+
+  .tab-active {
+    @apply bg-white 
+           text-gray-700 
+           border-2
+           border-white 
+           rounded-t-lg 
+           border-b-0 
+           relative 
+           top-[2px];
+  }
+
+  .tab-inactive {
+    @apply text-gray-400 
+           border-b-2
+           border-transparent
+           hover:text-gray-200 
+           hover:border-b-2
+           hover:border-b-ruby;
+  }
+}

app/views/pages/show.html.erb

@@ -52,5 +52,40 @@
     </a>
   </div>
 </div>
-<%= render Pages::Groups::Component.new(group: @page.groups.first) %>
-<%= render Pages::Groups::Component.new(group: @page.groups.last) %>
+
+<div data-controller="tabs">
+  <div class="bg-deep-azure-zeta">
+    <div class="max-w-7xl mx-auto">
+      <div>
+        <div>
+          <nav class="-mb-px flex space-x-1 md:space-x-2" aria-label="Tabs">
+            <a id="main-tab"
+               data-tabs-target="tab" 
+               data-action="click->tabs#change"
+               href="#"
+               class="tab tab-active"
+            >
+              <span class='text-sm md:text-lg'>🍽️ Basic Stuff</span>
+            </a>
+            <a id="railsbytes-tab"
+               data-tabs-target="tab" 
+               data-action="click->tabs#change"
+               href="#"
+               class="tab tab-inactive"
+            >
+              <span class='text-sm md:text-lg'>🍩 RailsBytes</span>
+            </a>
+          </nav>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div id="main-tab-panel" data-tabs-target="panel">
+    <%= render Pages::Groups::Component.new(group: @page.groups.first) %>
+  </div>
+
+  <div id="railsbytes-tab-panel" data-tabs-target="panel" hidden>
+    <%= render Pages::Groups::Component.new(group: @page.groups.last) %>
+  </div>
+</div>