63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
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>
|
|
),
|
|
}
|
|
}
|