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

added Tab Shortcode

Browse Source
This commit is contained in:
somrat sorkar
2023-05-13 16:25:26 +06:00
parent 6cea09528c
commit 36e8818657
2 changed files with 50 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/content/pages/elements.mdx
+33 -47
View File
@@ -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 |
src/layouts/shortcodes/Tabs.tsx
+17 -12
View File
@@ -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>
);
}