63 lines
1.6 KiB
TypeScript
63 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import ReactMarkdown from "react-markdown";
|
|
import rehypeRaw from "rehype-raw";
|
|
|
|
interface MarkdownProps {
|
|
children: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function Markdown({ children, className = "" }: MarkdownProps) {
|
|
return (
|
|
<div className={`prose prose-sm dark:prose-invert max-w-none ${className}`}>
|
|
<ReactMarkdown
|
|
rehypePlugins={[rehypeRaw]}
|
|
components={{
|
|
// Style inline code
|
|
code: ({ children, ...props }) => {
|
|
return (
|
|
<code
|
|
className="bg-[var(--secondary)] px-1.5 py-0.5 rounded text-sm font-mono"
|
|
{...props}
|
|
>
|
|
{children}
|
|
</code>
|
|
);
|
|
},
|
|
// Style code blocks
|
|
pre: ({ children }) => {
|
|
return (
|
|
<pre className="bg-[var(--secondary)] p-4 rounded-lg overflow-x-auto text-sm">
|
|
{children}
|
|
</pre>
|
|
);
|
|
},
|
|
// Style unordered lists
|
|
ul: ({ children }) => {
|
|
return (
|
|
<ul className="list-disc list-inside space-y-1">
|
|
{children}
|
|
</ul>
|
|
);
|
|
},
|
|
// Style ordered lists
|
|
ol: ({ children }) => {
|
|
return (
|
|
<ol className="list-decimal list-inside space-y-1">
|
|
{children}
|
|
</ol>
|
|
);
|
|
},
|
|
// Style paragraphs with spacing
|
|
p: ({ children }) => {
|
|
return <p className="mb-4 last:mb-0">{children}</p>;
|
|
},
|
|
}}
|
|
>
|
|
{children}
|
|
</ReactMarkdown>
|
|
</div>
|
|
);
|
|
}
|