52 lines
2.3 KiB
TypeScript
52 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import ReactMarkdown from "react-markdown";
|
|
|
|
interface MarkdownContentProps {
|
|
content: string;
|
|
/** Use 'compact' for small spaces like core notes, 'full' for large areas */
|
|
size?: "compact" | "full";
|
|
}
|
|
|
|
export default function MarkdownContent({
|
|
content,
|
|
size = "full",
|
|
}: MarkdownContentProps) {
|
|
const isCompact = size === "compact";
|
|
|
|
return (
|
|
<div
|
|
className={`
|
|
prose prose-slate max-w-none
|
|
${isCompact ? "prose-xs" : "prose-base"}
|
|
prose-headings:font-bold prose-headings:text-slate-900
|
|
prose-h1:text-2xl prose-h1:mt-6 prose-h1:mb-3
|
|
prose-h2:text-xl prose-h2:mt-5 prose-h2:mb-2
|
|
prose-h3:text-lg prose-h3:mt-4 prose-h3:mb-2
|
|
prose-h4:text-base prose-h4:mt-3 prose-h4:mb-1
|
|
prose-p:text-slate-700 prose-p:leading-relaxed prose-p:my-2
|
|
prose-a:text-blue-600 prose-a:font-medium prose-a:no-underline hover:prose-a:underline
|
|
prose-strong:text-slate-900 prose-strong:font-bold
|
|
prose-em:text-slate-700 prose-em:italic
|
|
prose-code:bg-slate-100 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded
|
|
prose-code:text-slate-800 prose-code:font-mono prose-code:text-sm prose-code:before:content-none prose-code:after:content-none
|
|
prose-pre:bg-slate-900 prose-pre:text-slate-100 prose-pre:border-0 prose-pre:rounded-lg prose-pre:p-4 prose-pre:overflow-x-auto
|
|
prose-pre:shadow-sm prose-pre:my-3
|
|
prose-blockquote:border-l-4 prose-blockquote:border-blue-300 prose-blockquote:text-slate-600
|
|
prose-blockquote:italic prose-blockquote:px-4 prose-blockquote:py-1 prose-blockquote:my-2
|
|
prose-ul:list-disc prose-ul:list-inside prose-ul:text-slate-700 prose-ul:my-2 prose-ul:pl-4
|
|
prose-ol:list-decimal prose-ol:list-inside prose-ol:text-slate-700 prose-ol:my-2 prose-ol:pl-4
|
|
prose-li:text-slate-700 prose-li:leading-relaxed prose-li:my-1
|
|
prose-hr:border-slate-300 prose-hr:my-4
|
|
prose-table:text-slate-700 prose-table:my-3
|
|
prose-thead:bg-slate-100 prose-thead:border-slate-300
|
|
prose-td:px-3 prose-td:py-2 prose-td:border-slate-200
|
|
prose-th:px-3 prose-th:py-2 prose-th:border-slate-300 prose-th:font-semibold
|
|
prose-tr:border-slate-200
|
|
prose-img:rounded-lg prose-img:shadow-md prose-img:my-3
|
|
`}
|
|
>
|
|
<ReactMarkdown>{content}</ReactMarkdown>
|
|
</div>
|
|
);
|
|
} |