48 lines
2.1 KiB
TypeScript
48 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import ReactMarkdown from 'react-markdown';
|
|
import remarkGfm from 'remark-gfm';
|
|
|
|
import { containedLongTextClass } from '@/lib/text-wrapping';
|
|
|
|
export function MarkdownContent({ content }: { content: string }) {
|
|
return (
|
|
<div className={`prose prose-sm max-w-none text-[#1D1715] prose-headings:text-[#0B0B0B] prose-p:text-[#1D1715] prose-p:leading-7 prose-strong:text-[#0B0B0B] prose-a:text-[#342E2B] prose-a:underline prose-a:decoration-[#B8AEA8] prose-a:underline-offset-4 prose-li:text-[#1D1715] prose-blockquote:border-l-[#D8D2CE] prose-blockquote:text-[#4F4642] prose-code:rounded-md prose-code:bg-[#ECE8E5] prose-code:px-1.5 prose-code:py-0.5 prose-code:text-[#342E2B] prose-code:[overflow-wrap:anywhere] prose-pre:border prose-pre:border-[#D8D2CE] prose-pre:bg-[#ECE8E5] prose-pre:text-[#342E2B] prose-pre:whitespace-pre-wrap prose-pre:[overflow-wrap:anywhere] [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 ${containedLongTextClass}`}>
|
|
<ReactMarkdown
|
|
remarkPlugins={[remarkGfm]}
|
|
components={{
|
|
table: ({ children, ...props }) => (
|
|
<div className="my-3 overflow-x-auto rounded-lg border border-[#D8D2CE]">
|
|
<table className="w-full border-collapse text-sm" {...props}>
|
|
{children}
|
|
</table>
|
|
</div>
|
|
),
|
|
thead: ({ children, ...props }) => (
|
|
<thead className="bg-[#ECE8E5]" {...props}>
|
|
{children}
|
|
</thead>
|
|
),
|
|
th: ({ children, ...props }) => (
|
|
<th className="border-b border-[#D8D2CE] px-3 py-2 text-left font-semibold text-[#0B0B0B]" {...props}>
|
|
{children}
|
|
</th>
|
|
),
|
|
td: ({ children, ...props }) => (
|
|
<td className="border-b border-[#E7E2DE] px-3 py-2 text-[#1D1715]" {...props}>
|
|
{children}
|
|
</td>
|
|
),
|
|
tr: ({ children, ...props }) => (
|
|
<tr className="transition-colors hover:bg-[#F7F5F4]" {...props}>
|
|
{children}
|
|
</tr>
|
|
),
|
|
}}
|
|
>
|
|
{content}
|
|
</ReactMarkdown>
|
|
</div>
|
|
);
|
|
}
|