10h30/astroplate
1
0
Fork 0
mirror of https://github.com/10h30/astroplate.git synced 2026-06-05 15:08:00 +09:00
Code Issues Packages Projects Releases Wiki Activity

fixed tab issue for elements page

Browse Source
This commit is contained in:
Omar Faruk
2023-05-13 15:48:37 +06:00
parent 998b625341
commit c01f9ddb07
3 changed files with 31 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -30,7 +30,7 @@
"fuse.js": "^6.6.2",
"github-slugger": "^2.0.0",
"gray-matter": "^4.0.3",
"marked": "^5.0.1",
"marked": "^5.0.2",
"postcss": "^8.4.23",
"prettier": "^2.8.8",
"prettier-plugin-astro": "^0.8.0",
src/content/pages/elements.mdx
+15 -3
View File
@@ -10,15 +10,27 @@ draft: false
<Tabs client:load>
<Tab name="Tab 1">
1
<h2>Tab 1</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 2">
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">
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>
</Tabs>
src/layouts/shortcodes/Tabs.tsx
+15 -35
View File
@@ -1,8 +1,9 @@
import React, { useEffect, useRef } from "react";
import { marked } from "marked";
import { number } from "prop-types";
import React, { useEffect, useRef, useState } from "react";
function Tabs({ children }: { children: any }) {
//select tabItems
const tabItemsRef = useRef<HTMLDivElement>(null);
const [active,setAvtive]=useState(0)
const tabLinks = Array.from(
children.props.value.matchAll(
@@ -11,47 +12,26 @@ function Tabs({ children }: { children: any }) {
(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">
<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)}
className={`tab-nav-item ${index === active && "active"}`}
onClick={() =>setAvtive(index) }
>
{item}
{item.name}
</li>
))}
</ul>
<div className="tab-content" ref={tabItemsRef}>
{children}
</div> */}
{
tabLinks.map((item,i)=><div className={active===i?"block tab-content px-5":"hidden"} dangerouslySetInnerHTML={{__html:marked.parseInline(item.children)}} />)
}
</div>
);
}