Updates

2026-03-04 17:35:14 +01:00
parent f73b56cdc4
commit db26e26495
113 changed files with 12433 additions and 169 deletions
@@ -0,0 +1,81 @@
+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 (
+                        // @ts-ignore
+                        <CodeBlock {...props} backgroundColor={codeBgColor}>
+                            {/* @ts-ignore */}
+                            {children.props.children}
+                        </CodeBlock>
+                    );
+                }
+                return (
+                    // @ts-ignore
+                    <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) => (
+                // @ts-ignore
+                <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)",
+    };
+}