feat: add global MDX component overrides

mdx-components.tsx

@@ -0,0 +1,62 @@
+import type { MDXComponents } from 'mdx/types'
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...components,
+    // Typography
+    h1: ({ children }) => (
+      <h1 className="scroll-m-20 font-sans text-4xl font-extrabold tracking-tight lg:text-5xl mt-10 mb-4 text-ink">
+        {children}
+      </h1>
+    ),
+    h2: ({ children }) => (
+      <h2 className="scroll-m-20 border-b border-border pb-2 font-sans text-3xl font-semibold tracking-tight mt-12 mb-4 first:mt-0 text-ink">
+        {children}
+      </h2>
+    ),
+    h3: ({ children }) => (
+      <h3 className="scroll-m-20 font-sans text-2xl font-semibold tracking-tight mt-8 mb-3 text-ink">
+        {children}
+      </h3>
+    ),
+    p: ({ children }) => (
+      <p className="leading-7 [&:not(:first-child)]:mt-6 text-ink">
+        {children}
+      </p>
+    ),
+    blockquote: ({ children }) => (
+      <blockquote className="border-l-4 border-border pl-4 italic text-ink-soft my-6">
+        {children}
+      </blockquote>
+    ),
+    hr: () => <hr className="my-8 border-border" />,
+    a: ({ href, children }) => (
+      <a href={href} className="font-medium underline underline-offset-4 hover:text-accent transition-colors">
+        {children}
+      </a>
+    ),
+    code: ({ children, ...props }) => (
+      <code
+        {...props}
+        className="rounded bg-surface px-[0.3rem] py-[0.2rem] font-mono text-sm text-ink"
+      >
+        {children}
+      </code>
+    ),
+    pre: ({ children, ...props }) => (
+      <pre {...props} className="overflow-x-auto rounded-xl bg-surface text-sm my-6 p-4">
+        {children}
+      </pre>
+    ),
+    img: ({ src, alt, ...rest }) => (
+      <img src={src} alt={alt} className="my-8 rounded-xl w-full" {...rest} />
+    ),
+    table: ({ children }) => (
+      <div className="my-6 overflow-x-auto">
+        <table className="w-full border-collapse text-sm">
+          {children}
+        </table>
+      </div>
+    ),
+  }
+}