From ff434a3011dff782220d743e972e6310948cfd1d Mon Sep 17 00:00:00 2001
From: TeshuKatepalli <teshu.katepalli@gspann.com>
Date: Mon, 23 Oct 2023 08:56:26 +0530
Subject: [PATCH] Added the tabs functionality

---
 blocks/tabs/tabs.css |  8 +++++++
 blocks/tabs/tabs.js  | 51 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 blocks/tabs/tabs.css
 create mode 100644 blocks/tabs/tabs.js

diff --git a/blocks/tabs/tabs.css b/blocks/tabs/tabs.css
new file mode 100644
index 00000000..c74c4ca1
--- /dev/null
+++ b/blocks/tabs/tabs.css
@@ -0,0 +1,8 @@
+.mmg-tabs {
+    padding: 20px 0;
+}
+
+.tabpanel table tr:first-child td {
+    background-color: var(--primary-color)!important; /* Specify your desired background color here */
+    color: var(--text-color);
+}
\ No newline at end of file
diff --git a/blocks/tabs/tabs.js b/blocks/tabs/tabs.js
new file mode 100644
index 00000000..1261fc8f
--- /dev/null
+++ b/blocks/tabs/tabs.js
@@ -0,0 +1,51 @@
+function removeActiveClasses(content) {
+  const contentElements = content.querySelectorAll('.tabpanel');
+  [...contentElements].forEach((element) => {
+    element.classList.remove('active');
+  });
+  const listElements = content.querySelectorAll('button');
+  [...listElements].forEach((element) => {
+    element.classList.remove('active');
+  });
+}
+
+function activeFirstElements(content) {
+  const contentElement = content.querySelector('.tabpanel');
+  contentElement.classList.add('active');
+  const listElement = content.querySelector('button');
+  listElement.classList.add('active');
+}
+
+export default function decorate(block) {
+  const tabComponent = document.createElement('div');
+  tabComponent.className = 'mmg-tabs';
+  tabComponent.classList.add('outer');
+  const ul = document.createElement('div');
+  ul.className = 'tablist';
+  const tabContent = document.createElement('div');
+  tabContent.className = 'tabpanels';
+
+  // Iterate through block's children and create tabs
+  [...block.children].forEach((row) => {
+    const itemContent = row.children[1];
+    itemContent.className = 'tabpanel';
+    const li = document.createElement('button');
+    li.className = 'tab';
+    li.appendChild(row.children[0]);
+
+    li.addEventListener('click', () => {
+      removeActiveClasses(tabComponent);
+      li.classList.add('active');
+      itemContent.classList.add('active');
+    });
+    ul.appendChild(li);
+    tabContent.appendChild(itemContent);
+  });
+
+  // Set the first tab as active by default
+  block.textContent = '';
+  tabComponent.appendChild(ul);
+  tabComponent.appendChild(tabContent);
+  block.appendChild(tabComponent);
+  activeFirstElements(tabComponent);
+}