custom component support for mdx

components/mdx/index.tsx

@@ -1,5 +1,44 @@
-import { ReactNode } from "react";
+import { v4 } from "uuid"
 
-export const P1TAG = ({ children }: { children: ReactNode }) => (
-    <h1>{children}</h1>
+type ElementType<Key extends keyof JSX.IntrinsicElements> = React.FC<JSX.IntrinsicElements[Key]>
+type FormattedTags = {
+    [Key in keyof JSX.IntrinsicElements]: ElementType<Key>
+}
+
+const H1TAG: ElementType<"h1"> = ({ children }) => { return (
+    <h1 key={v4()} className="text-4xl text-red-500">{children}</h1>
+)}
+
+const H2Tag: ElementType<"h2"> = ({ children }) => (
+    <h2 key={v4()}>{children}</h2>
 )
+
+const H3Tag: ElementType<"h3"> = ({ children }) => (
+    <h3 key={v4()}>{children}</h3>
+)
+
+const H4Tag: ElementType<"h4"> = ({ children }) => (
+    <h4 key={v4()}>{children}</h4>
+)
+
+const PTag: ElementType<"p"> = ({ children }) => (
+    <p key={v4()}>{children}</p>
+)
+
+const LiTag: ElementType<"li"> = ({ children }) => (
+    <li key={v4()}>{children}</li>
+)
+
+const BrTag: ElementType<"br"> = () => (
+    <br key={v4()} />
+)
+
+export default {
+    "h1": H1TAG,
+    "h2": H2Tag,
+    "h3": H3Tag,
+    "h4": H4Tag,
+    "p": PTag,
+    "li": LiTag,
+    "br": BrTag
+} satisfies Partial<FormattedTags>