MDX Basic elements

docs/components/MDX.tsx

@@ -1,8 +1,33 @@
 import { MDXRemote, MDXRemoteProps } from "next-mdx-remote/rsc";
+import { ReactNode, ComponentProps, HTMLProps } from "react";
+
+const defaultComponents: ComponentProps<any> = {
+  a: (props: HTMLProps<HTMLAnchorElement>) => (
+    <a {...props} className="transition-colors underline hover:text-piccolo">
+      {props.children}
+    </a>
+  ),
+  strong: (props: HTMLProps<HTMLSpanElement>) => (
+    <span {...props} className="font-medium">
+      {props.children}
+    </span>
+  ),
+  ul: (props: HTMLProps<HTMLUListElement>) => (
+    <ul {...props} className="list-disc ps-8">
+      {props.children}
+    </ul>
+  ),
+};
 
 export function MDX({
   markdown,
   ...rest
 }: { markdown: string } & Omit<MDXRemoteProps, "source">) {
-  return <MDXRemote {...rest} source={markdown} />;
+  return (
+    <MDXRemote
+      {...rest}
+      source={markdown}
+      components={rest.components || defaultComponents}
+    />
+  );
 }