46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import ReactMarkdown from 'react-markdown';
|
|
import remarkGfm from 'remark-gfm';
|
|
|
|
export function MarkdownContent({ content }: { content: string }) {
|
|
return (
|
|
<div className="prose prose-sm prose-invert max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
|
|
<ReactMarkdown
|
|
remarkPlugins={[remarkGfm]}
|
|
components={{
|
|
table: ({ children, ...props }) => (
|
|
<div className="my-3 overflow-x-auto rounded-lg border border-border">
|
|
<table className="w-full border-collapse text-sm" {...props}>
|
|
{children}
|
|
</table>
|
|
</div>
|
|
),
|
|
thead: ({ children, ...props }) => (
|
|
<thead className="bg-muted/60" {...props}>
|
|
{children}
|
|
</thead>
|
|
),
|
|
th: ({ children, ...props }) => (
|
|
<th className="px-3 py-2 text-left font-semibold text-foreground border-b border-border" {...props}>
|
|
{children}
|
|
</th>
|
|
),
|
|
td: ({ children, ...props }) => (
|
|
<td className="px-3 py-2 border-b border-border/50" {...props}>
|
|
{children}
|
|
</td>
|
|
),
|
|
tr: ({ children, ...props }) => (
|
|
<tr className="hover:bg-muted/30 transition-colors" {...props}>
|
|
{children}
|
|
</tr>
|
|
),
|
|
}}
|
|
>
|
|
{content}
|
|
</ReactMarkdown>
|
|
</div>
|
|
);
|
|
}
|