@@ -62,9 +69,9 @@ function Notice({ type, children }: { type: string; children: any }) {
)}
diff --git a/src/layouts/shortcodes/Tab.tsx b/src/layouts/shortcodes/Tab.tsx
new file mode 100644
index 0000000..051f6ce
--- /dev/null
+++ b/src/layouts/shortcodes/Tab.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+function Tab({ name, children }: { name: string; children: React.ReactNode }) {
+ return
{children}
;
+}
+
+export default Tab;
diff --git a/src/layouts/shortcodes/Tabs.tsx b/src/layouts/shortcodes/Tabs.tsx
new file mode 100644
index 0000000..96b90c6
--- /dev/null
+++ b/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
(null);
+
+ const tabLinks = Array.from(
+ children.props.value.matchAll(
+ /]*>(.*?)<\/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 (
+
+ {/*
+ {tabLinks.map((item: any, index: number) => (
+ - handleChangTab(e, index)}
+ >
+ {item}
+
+ ))}
+
+
+ {children}
+
*/}
+