testing tabs shortcode

astro.config.mjs

@@ -32,6 +32,8 @@ export default defineConfig({
         "@/shortcodes/Notice",
         "@/shortcodes/Video",
         "@/shortcodes/Youtube",
+        "@/shortcodes/Tabs",
+        "@/shortcodes/Tab",
       ],
     }),
     mdx(),

src/content/pages/elements.mdx

@@ -5,6 +5,24 @@ description: "this is meta description"
 draft: false
 ---
 
+### Tab
+
+<Tabs client:load>
+
+<Tab name="Tab 1">
+1
+</Tab>
+
+<Tab name="Tab 2">
+2
+</Tab>
+
+<Tab name="Tab 3">
+3
+</Tab>
+
+</Tabs>
+
 # Heading 1
 
 ## Heading 2

src/layouts/shortcodes/Accordion.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 
 const Accordion = ({
   title,
@@ -6,8 +6,8 @@ const Accordion = ({
   className,
 }: {
   title: string;
-  children: any;
-  className: string | null;
+  children: React.ReactNode;
+  className?: string;
 }) => {
   const [show, setShow] = useState(false);
 

src/layouts/shortcodes/Notice.tsx

@@ -1,6 +1,13 @@
 import { humanize } from "@/lib/utils/textConverter";
+import React from "react";
 
-function Notice({ type, children }: { type: string; children: any }) {
+function Notice({
+  type,
+  children,
+}: {
+  type: string;
+  children: React.ReactNode;
+}) {
   return (
     <div className={`notice ${type}`}>
       <div className="notice-head">
@@ -62,9 +69,9 @@ function Notice({ type, children }: { type: string; children: any }) {
             <path
               d="M10 9V14M10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19ZM10.0498 6V6.1L9.9502 6.1002V6H10.0498Z"
               stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
             />
           </svg>
         )}

src/layouts/shortcodes/Tab.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+function Tab({ name, children }: { name: string; children: React.ReactNode }) {
+  return <div data-name={name}>{children}</div>;
+}
+
+export default Tab;

src/layouts/shortcodes/Tabs.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useRef } from "react";
+
+function Tabs({ children }: { children: any }) {
+  //select tabItems
+  const tabItemsRef = useRef<HTMLDivElement>(null);
+
+  const tabLinks = Array.from(
+    children.props.value.matchAll(
+      /<div\s+data-name="([^"]+)"[^>]*>(.*?)<\/div>/gs
+    ),
+    (match: RegExpMatchArray) => ({ name: match[1], children: match[0] })
+  );
+
+  console.log(tabLinks);
+
+  //change tab item on click
+  const handleChangTab = (event: any, index: number) => {
+    const tabLinks = [...event.currentTarget.parentElement.children];
+    const items = [...tabItemsRef.current!.children];
+    const activeItem = items.find((item) => !item.classList.contains("hidden"));
+    const activeTabLink = tabLinks.find((item) =>
+      item.classList.contains("active")
+    );
+    if (activeItem === items[index]) return;
+    activeTabLink.classList.remove("active");
+    event.currentTarget.classList.add("active");
+    if (activeItem) {
+      activeItem.classList.add("hidden");
+    }
+    items[index].classList.remove("hidden");
+  };
+
+  //show first tab-item
+  useEffect(() => {
+    let allItems = [...tabItemsRef.current!.children];
+    allItems[0].classList.remove("hidden");
+  }, []);
+
+  return (
+    <div className="tab">
+      {/* <ul className="tab-nav">
+        {tabLinks.map((item: any, index: number) => (
+          <li
+            key={index}
+            className={`tab-nav-item ${index === 0 && "active"}`}
+            onClick={(e) => handleChangTab(e, index)}
+          >
+            {item}
+          </li>
+        ))}
+      </ul>
+      <div className="tab-content" ref={tabItemsRef}>
+        {children}
+      </div> */}
+    </div>
+  );
+}
+
+export default Tabs;

src/layouts/shortcodes/Video.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 function Video({
   title,
   width = 500,
@@ -6,10 +7,10 @@ function Video({
   ...rest
 }: {
   title: string;
-  width?: number;
-  height?: string;
+  width: number;
+  height: number | "auto";
   src: string;
-  rest: any;
+  [key: string]: any;
 }) {
   return (
     <video

src/layouts/shortcodes/Youtube.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import LiteYouTubeEmbed from "react-lite-youtube-embed";
 import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css";
 
@@ -8,7 +9,7 @@ const Youtube = ({
 }: {
   id: string;
   title: string;
-  rest: any;
+  [key: string]: any;
 }) => {
   return (
     <LiteYouTubeEmbed

src/styles/components.scss

@@ -103,7 +103,7 @@
   }
   &-content {
     &-panel {
-      @apply hidden p-8;
+      @apply p-8;
       p {
         @apply mb-0;
       }
@@ -160,15 +160,15 @@
   @apply prose-img:max-w-full prose-img:rounded;
   @apply prose-hr:border-border prose-hr:dark:border-darkmode-border;
   @apply prose-p:text-base prose-p:text-text prose-p:dark:text-darkmode-text;
-  @apply prose-blockquote:border-l-[10px] prose-blockquote:rounded-lg prose-blockquote:border prose-blockquote:border-primary prose-blockquote:bg-theme-light prose-blockquote:px-8 prose-blockquote:py-10 prose-blockquote:font-secondary prose-blockquote:text-2xl prose-blockquote:not-italic prose-blockquote:text-dark prose-blockquote:dark:border-darkmode-primary prose-blockquote:dark:bg-darkmode-theme-light prose-blockquote:dark:text-darkmode-light;
+  @apply prose-blockquote:rounded-lg prose-blockquote:border prose-blockquote:border-l-[10px] prose-blockquote:border-primary prose-blockquote:bg-theme-light prose-blockquote:px-8 prose-blockquote:py-10 prose-blockquote:font-secondary prose-blockquote:text-2xl prose-blockquote:not-italic prose-blockquote:text-dark prose-blockquote:dark:border-darkmode-primary prose-blockquote:dark:bg-darkmode-theme-light prose-blockquote:dark:text-darkmode-light;
   @apply prose-pre:rounded-lg prose-pre:bg-theme-light prose-pre:dark:bg-darkmode-theme-light;
   @apply prose-code:px-1 prose-code:text-primary prose-code:dark:text-darkmode-primary;
   @apply prose-strong:text-dark prose-strong:dark:text-darkmode-text;
   @apply prose-a:text-text prose-a:underline hover:prose-a:text-primary prose-a:dark:text-darkmode-text hover:prose-a:dark:text-darkmode-primary;
   @apply prose-li:text-text prose-li:dark:text-darkmode-text;
-  @apply prose-table:before:rounded-[inherit] prose-table:before:content-[""] prose-table:relative prose-table:overflow-hidden prose-table:rounded-lg prose-table:before:absolute prose-table:before:left-0 prose-table:before:top-0 prose-table:before:h-full prose-table:before:w-full prose-table:before:border prose-table:before:dark:border-darkmode-border;
+  @apply prose-table:relative prose-table:overflow-hidden prose-table:rounded-lg prose-table:before:absolute prose-table:before:left-0 prose-table:before:top-0 prose-table:before:h-full prose-table:before:w-full prose-table:before:rounded-[inherit] prose-table:before:border prose-table:before:content-[""] prose-table:before:dark:border-darkmode-border;
   @apply prose-thead:border-border prose-thead:bg-theme-light prose-thead:dark:border-darkmode-border prose-thead:dark:bg-darkmode-theme-light;
-  @apply prose-th:py-[18px] prose-th:relative prose-th:z-10 prose-th:px-4 prose-th:text-dark prose-th:dark:text-darkmode-text;
+  @apply prose-th:relative prose-th:z-10 prose-th:px-4 prose-th:py-[18px] prose-th:text-dark prose-th:dark:text-darkmode-text;
   @apply prose-tr:border-border prose-tr:dark:border-darkmode-border;
-  @apply prose-td:py-[18px] prose-td:relative prose-td:z-10 prose-td:px-3 prose-td:dark:text-darkmode-text;
+  @apply prose-td:relative prose-td:z-10 prose-td:px-3 prose-td:py-[18px] prose-td:dark:text-darkmode-text;
 }