diff --git a/astro.config.mjs b/astro.config.mjs index 86d09a0..d3ce0c5 100755 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -32,6 +32,8 @@ export default defineConfig({ "@/shortcodes/Notice", "@/shortcodes/Video", "@/shortcodes/Youtube", + "@/shortcodes/Tabs", + "@/shortcodes/Tab", ], }), mdx(), diff --git a/package.json b/package.json index ceba2c1..6469631 100755 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/content/pages/elements.mdx b/src/content/pages/elements.mdx index 1e14f3e..723aa30 100755 --- a/src/content/pages/elements.mdx +++ b/src/content/pages/elements.mdx @@ -163,6 +163,39 @@ window.addEventListener("load", (e) => { --- +### Tab + + + + + +#### 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. + + + + +#### 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. + + + + +#### 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 + + + + +--- + ### Table | # | First | Last | Handle | diff --git a/src/layouts/shortcodes/Accordion.tsx b/src/layouts/shortcodes/Accordion.tsx index 1eddea9..48ae362 100644 --- a/src/layouts/shortcodes/Accordion.tsx +++ b/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); diff --git a/src/layouts/shortcodes/Notice.tsx b/src/layouts/shortcodes/Notice.tsx index 6a0f22e..48c4364 100644 --- a/src/layouts/shortcodes/Notice.tsx +++ b/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 (
@@ -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..a1894cd --- /dev/null +++ b/src/layouts/shortcodes/Tabs.tsx @@ -0,0 +1,44 @@ +import { marked } from "marked"; +import React, { useState } from "react"; + +function Tabs({ children }: { children: any }) { + const [active, setAvtive] = useState(0); + + const tabItems = Array.from( + children.props.value.matchAll( + /]*>(.*?)<\/div>/gs + ), + (match: RegExpMatchArray) => ({ name: match[1], children: match[0] }) + ); + + return ( +
+
    + {tabItems.map((item: any, index: number) => ( +
  • setAvtive(index)} + > + {item.name} +
    • + ))} +
+ +
+ {tabItems.map((item, i) => ( +
+ ))} +
+
+ ); +} + +export default Tabs; diff --git a/src/layouts/shortcodes/Video.tsx b/src/layouts/shortcodes/Video.tsx index d274e7d..3c22504 100644 --- a/src/layouts/shortcodes/Video.tsx +++ b/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 (