testing tabs shortcode

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