ba8dbefcd2
bg-white/[0.08] was too subtle — text was unreadable against the dark background. Bump to bg-white/[0.12] with a subtle border and text-foreground for proper contrast. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
95 lines
3.0 KiB
TypeScript
95 lines
3.0 KiB
TypeScript
import ReactMarkdown from 'react-markdown'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface MarkdownContentProps {
|
|
content: string
|
|
className?: string
|
|
}
|
|
|
|
/**
|
|
* Renders markdown content with proper styling.
|
|
* Supports: bold, italic, lists, code blocks, headers, etc.
|
|
*/
|
|
export function MarkdownContent({ content, className }: MarkdownContentProps) {
|
|
return (
|
|
<div className={cn('prose prose-sm prose-invert max-w-none', className)}>
|
|
<ReactMarkdown
|
|
components={{
|
|
// Style paragraphs
|
|
p: ({ children }) => (
|
|
<p className="mb-3 last:mb-0">{children}</p>
|
|
),
|
|
// Style bold text
|
|
strong: ({ children }) => (
|
|
<strong className="font-semibold text-foreground">{children}</strong>
|
|
),
|
|
// Style ordered lists
|
|
ol: ({ children }) => (
|
|
<ol className="mb-3 ml-4 list-decimal space-y-1 last:mb-0">{children}</ol>
|
|
),
|
|
// Style unordered lists
|
|
ul: ({ children }) => (
|
|
<ul className="mb-3 ml-4 list-disc space-y-1 last:mb-0">{children}</ul>
|
|
),
|
|
// Style list items
|
|
li: ({ children }) => (
|
|
<li className="text-muted-foreground">{children}</li>
|
|
),
|
|
// Style inline code
|
|
code: ({ className, children, ...props }) => {
|
|
// Check if it's a code block (has language class) or inline code
|
|
const isBlock = className?.includes('language-')
|
|
if (isBlock) {
|
|
return (
|
|
<code
|
|
className={cn(
|
|
'block rounded bg-code p-3 font-mono text-sm text-foreground overflow-x-auto',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</code>
|
|
)
|
|
}
|
|
return (
|
|
<code
|
|
className="rounded bg-white/[0.12] border border-white/[0.06] px-1.5 py-0.5 font-mono text-sm text-foreground"
|
|
{...props}
|
|
>
|
|
{children}
|
|
</code>
|
|
)
|
|
},
|
|
// Style code blocks (pre)
|
|
pre: ({ children }) => (
|
|
<pre className="mb-3 overflow-x-auto rounded bg-code p-0 last:mb-0">
|
|
{children}
|
|
</pre>
|
|
),
|
|
// Style headers
|
|
h1: ({ children }) => (
|
|
<h1 className="mb-3 text-lg font-bold text-foreground">{children}</h1>
|
|
),
|
|
h2: ({ children }) => (
|
|
<h2 className="mb-2 text-base font-bold text-foreground">{children}</h2>
|
|
),
|
|
h3: ({ children }) => (
|
|
<h3 className="mb-2 text-sm font-bold text-foreground">{children}</h3>
|
|
),
|
|
// Style horizontal rules
|
|
hr: () => <hr className="my-4 border-border" />,
|
|
// Style blockquotes
|
|
blockquote: ({ children }) => (
|
|
<blockquote className="mb-3 border-l-4 border-border pl-4 italic text-muted-foreground last:mb-0">
|
|
{children}
|
|
</blockquote>
|
|
),
|
|
}}
|
|
>
|
|
{content}
|
|
</ReactMarkdown>
|
|
</div>
|
|
)
|
|
}
|