78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
import { MDXComponents } from "mdx/types";
|
|
import CodeBlock from "../elements/CodeBlock";
|
|
import H1 from "../layout/H1";
|
|
import H4 from "../layout/H4";
|
|
import React from "react";
|
|
import twuiSlugify from "../utils/slugify";
|
|
import H2 from "../layout/H2";
|
|
import P from "../layout/P";
|
|
import H3 from "../layout/H3";
|
|
|
|
type Params = {
|
|
components: MDXComponents;
|
|
codeBgColor?: string;
|
|
};
|
|
|
|
export function useMDXComponents(params?: Params) {
|
|
const codeBgColor = params?.codeBgColor || "#000000";
|
|
|
|
return {
|
|
components: {
|
|
h1: ({ children }) => <H1>{children}</H1>,
|
|
h4: ({ children }) => <H4>{children}</H4>,
|
|
pre: ({ children, ...props }) => {
|
|
if (React.isValidElement(children) && children.props) {
|
|
return (
|
|
<CodeBlock {...props} backgroundColor={codeBgColor}>
|
|
{children.props.children}
|
|
</CodeBlock>
|
|
);
|
|
}
|
|
return (
|
|
<CodeBlock {...props} backgroundColor={codeBgColor}>
|
|
{children}
|
|
</CodeBlock>
|
|
);
|
|
},
|
|
h2: ({ children }) => {
|
|
const slug = twuiSlugify(children?.toString());
|
|
|
|
return (
|
|
<a
|
|
href={`#${slug}`}
|
|
id={slug}
|
|
className="twui-docs-header-anchor"
|
|
>
|
|
<H2 className="pt-4 m-0 mb-4 text-2xl">{children}</H2>
|
|
</a>
|
|
);
|
|
},
|
|
h3: ({ children }) => {
|
|
const slug = twuiSlugify(children?.toString());
|
|
|
|
return (
|
|
<a
|
|
href={`#${slug}`}
|
|
id={slug}
|
|
className="twui-docs-header-anchor"
|
|
>
|
|
<H3 className="pt-4 m-0 mb-4 text-xl">{children}</H3>
|
|
</a>
|
|
);
|
|
},
|
|
img: (props) => (
|
|
<img
|
|
{...props}
|
|
className="w-full h-auto shadow-lg rounded-default overflow-hidden"
|
|
/>
|
|
),
|
|
p: ({ children }) => (
|
|
<P className="mt-2 mb-6 max-w-none py-0">{children}</P>
|
|
),
|
|
li: ({ children }) => <li className="w-full">{children}</li>,
|
|
...params?.components,
|
|
} as MDXComponents,
|
|
codeBgColor: "rgb(7 12 22)",
|
|
};
|
|
}
|