From 4a5d3fdc7eafe250e08bf8d9a1dab5148147fc4c Mon Sep 17 00:00:00 2001
From: Mia Sinek <mia@miasinek.com>
Date: Mon, 16 Dec 2024 05:01:29 +0100
Subject: [PATCH] Tabs MVP - working but needs final touches

---
 app/javascript/controllers/tabs_controller.js | 47 +++++++++++++++++++
 app/javascript/stylesheets/custom/basics.css  | 26 +++++++++-
 app/views/pages/show.html.erb                 | 39 ++++++++++++++-
 3 files changed, 109 insertions(+), 3 deletions(-)
 create mode 100644 app/javascript/controllers/tabs_controller.js

diff --git a/app/javascript/controllers/tabs_controller.js b/app/javascript/controllers/tabs_controller.js
new file mode 100644
index 0000000..0c2b608
--- /dev/null
+++ b/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
+  }
+} 
\ No newline at end of file
diff --git a/app/javascript/stylesheets/custom/basics.css b/app/javascript/stylesheets/custom/basics.css
index f1f1a77..f8407da 100644
--- a/app/javascript/stylesheets/custom/basics.css
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/app/views/pages/show.html.erb b/app/views/pages/show.html.erb
index dc5e113..e512438 100644
--- a/app/views/pages/show.html.erb
+++ b/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>