From 36e8818657e050b78dafaf74216afb215dd45c82 Mon Sep 17 00:00:00 2001
From: somrat sorkar <themefisher.dev@gmail.com>
Date: Sat, 13 May 2023 16:25:26 +0600
Subject: [PATCH] added Tab Shortcode

---
 src/content/pages/elements.mdx  | 80 ++++++++++++++-------------------
 src/layouts/shortcodes/Tabs.tsx | 29 +++++++-----
 2 files changed, 50 insertions(+), 59 deletions(-)

diff --git a/src/content/pages/elements.mdx b/src/content/pages/elements.mdx
index d3b8c90..723aa30 100755
--- a/src/content/pages/elements.mdx
+++ b/src/content/pages/elements.mdx
@@ -5,53 +5,6 @@ description: "this is meta description"
 draft: false
 ---
 
-### Tab
-
-<Tabs client:load>
-
-<Tab name="Tab 1">
-
-### Tab 1
-
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
-</Tab>
-
-<Tab name="Tab 2">
-<h2>Tab 2</h2>
-
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
-</Tab>
-
-<Tab name="Tab 3">
-<h2>Tab 3</h2>
-
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
-</Tab>
-
-<Tab name="Tab 1">
-<h2>Tab 4</h2>
-
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
-</Tab>
-
-<Tab name="Tab 5">
-<h2>Tab 5</h2>
-
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
-</Tab>
-
-</Tabs>
-
 # Heading 1
 
 ## Heading 2
@@ -210,6 +163,39 @@ window.addEventListener("load", (e) => {
 
 ---
 
+### Tab
+
+<Tabs client:load>
+
+<Tab name="Tab 1">
+
+#### Did you come here for something in particular?
+
+Did you come here for something in particular or just general Riker-bashing? And blowing into maximum warp speed, you appeared for an instant to be in two places at once. We have a saboteur aboard. We know you’re dealing in stolen ore. But I wanna talk about the assassination attempt on Lieutenant Worf.
+</Tab>
+
+<Tab name="Tab 2">
+
+#### I wanna talk about the assassination attempt
+
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+</Tab>
+
+<Tab name="Tab 3">
+
+#### We know you’re dealing in stolen ore
+
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+</Tab>
+
+</Tabs>
+
+---
+
 ### Table
 
 | #   |    First     |     Last     |       Handle |
diff --git a/src/layouts/shortcodes/Tabs.tsx b/src/layouts/shortcodes/Tabs.tsx
index 150e164..a1894cd 100644
--- a/src/layouts/shortcodes/Tabs.tsx
+++ b/src/layouts/shortcodes/Tabs.tsx
@@ -1,11 +1,10 @@
 import { marked } from "marked";
-import { number } from "prop-types";
-import React, {useState } from "react";
+import React, { useState } from "react";
 
 function Tabs({ children }: { children: any }) {
-const [active,setAvtive]=useState(0)
+  const [active, setAvtive] = useState(0);
 
-  const tabLinks = Array.from(
+  const tabItems = Array.from(
     children.props.value.matchAll(
       /<div\s+data-name="([^"]+)"[^>]*>(.*?)<\/div>/gs
     ),
@@ -15,23 +14,29 @@ const [active,setAvtive]=useState(0)
   return (
     <div className="tab">
       <ul className="tab-nav">
-        {tabLinks.map((item: any, index: number) => (
+        {tabItems.map((item: any, index: number) => (
           <li
             key={index}
             className={`tab-nav-item ${index === active && "active"}`}
-            onClick={() =>setAvtive(index) }
+            onClick={() => setAvtive(index)}
           >
             {item.name}
           </li>
         ))}
       </ul>
 
-
-      {
-        tabLinks.map((item,i)=><div className={active===i?"block tab-content px-5":"hidden"} dangerouslySetInnerHTML={{__html:marked.parseInline(item.children)}} />)
-      }
-
-
+      <div className="tab-content">
+        {tabItems.map((item, i) => (
+          <div
+            className={`tab-content-panel ${
+              active === i ? "active" : "hidden"
+            }`}
+            dangerouslySetInnerHTML={{
+              __html: marked.parse(item.children),
+            }}
+          />
+        ))}
+      </div>
     </div>
   );
 }