From 43947767359c7ee95140d250b40048103bb3a8db Mon Sep 17 00:00:00 2001
From: Jeremy Rangel <jeremy.rangel@rangeldigital.com>
Date: Mon, 30 Dec 2024 19:23:48 -0800
Subject: [PATCH] Add tabs to lcp-ui js and css

---
 assets/js/lcp-ui.js | 20 +++++++++++++++++++-
 style.css           | 41 ++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/assets/js/lcp-ui.js b/assets/js/lcp-ui.js
index 9985cd4..6015602 100644
--- a/assets/js/lcp-ui.js
+++ b/assets/js/lcp-ui.js
@@ -31,4 +31,22 @@ document.addEventListener('DOMContentLoaded', function () {
 
 });
 
-  
\ No newline at end of file
+document.addEventListener('DOMContentLoaded', function () {
+    const tabs = document.querySelectorAll('.tab-link');
+    const panes = document.querySelectorAll('.tab-pane');
+
+    tabs.forEach(tab => {
+      tab.addEventListener('click', function (event) {
+        event.preventDefault();
+
+        // Remove active class from all tabs and panes
+        tabs.forEach(link => link.classList.remove('active'));
+        panes.forEach(pane => pane.classList.remove('active'));
+
+        // Add active class to the clicked tab and its corresponding pane
+        tab.classList.add('active');
+        const targetPane = document.querySelector(tab.getAttribute('href'));
+        targetPane.classList.add('active');
+      });
+    });
+  });
\ No newline at end of file
diff --git a/style.css b/style.css
index 003f340..580ac64 100644
--- a/style.css
+++ b/style.css
@@ -237,4 +237,43 @@ Version: 1.0
 }
 
 
-  
\ No newline at end of file
+  
+/* LCP TABS */
+ /* Simple styles for tabs */
+ #myTab {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  #myTab li {
+    display: inline-block;
+    margin-right: 10px;
+  }
+
+  .tab-link {
+    cursor: pointer;
+    text-decoration: none;
+    padding: 10px 20px;
+    background-color: lightgray;
+    color: black;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+
+  .tab-link.active {
+    background-color: #007bff;
+    color: white;
+  }
+
+  /* Style for the content panes */
+  .tab-pane {
+    display: none;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-top: none;
+  }
+
+  .tab-pane.active {
+    display: block;
+  }
\ No newline at end of file