File size: 3,618 Bytes
ae14296 db584ca ae14296 e305dc7 ae14296 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";
export default function MarkdownView({ children }: { children: string }) {
return (
<div className="max-w-none w-full py-8 px-4 sm:px-16 bg-slate-900/30 rounded-2xl border border-slate-800/50 backdrop-blur-sm shadow-2xl">
<ReactMarkdown
remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeKatex]}
components={{
h1: ({ children }) => (
<div className="text-center mb-12 mt-4">
<h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-white inline-block relative pb-4">
{children}
<span className="absolute bottom-0 left-1/4 right-1/4 h-1 bg-primary rounded-full opacity-60" />
</h1>
</div>
),
h2: ({ children }) => (
<h2 className="text-2xl sm:text-3xl font-bold mt-12 mb-6 text-white flex items-center gap-3 group">
<span className="w-1.5 h-8 bg-primary rounded-full group-hover:scale-y-110 transition-transform" />
{children}
</h2>
),
h3: ({ children }) => (
<h3 className="text-xl font-semibold mt-8 mb-4 text-slate-100 flex items-center gap-2">
<span className="w-1 h-1 rounded-full bg-primary/60" />
{children}
</h3>
),
p: ({ children }) => (
<p className="text-slate-300 leading-relaxed mb-6 text-lg font-light">
{children}
</p>
),
blockquote: ({ children }) => (
<div className="my-8 p-6 bg-primary/5 border-l-4 border-primary rounded-r-xl backdrop-blur-md">
<div className="text-primary-foreground/90 italic text-lg leading-relaxed font-medium">
{children}
</div>
</div>
),
ul: ({ children }) => (
<ul className="space-y-3 mb-8 ml-4">
{children}
</ul>
),
li: ({ children }) => (
<li className="flex items-start gap-3 text-slate-300 text-lg">
<span className="mt-2.5 w-1.5 h-1.5 rounded-full bg-primary/40 shrink-0" />
<span>{children}</span>
</li>
),
table: ({ children }) => (
<div className="my-10 overflow-hidden rounded-xl border border-slate-800 shadow-xl bg-slate-900/50">
<table className="w-full border-collapse text-left">
{children}
</table>
</div>
),
thead: ({ children }) => (
<thead className="bg-slate-800/80 text-slate-200">
{children}
</thead>
),
th: ({ children }) => (
<th className="px-6 py-4 font-bold uppercase tracking-wider text-xs border-b border-slate-700">
{children}
</th>
),
td: ({ children }) => (
<td className="px-6 py-4 border-b border-slate-800 text-slate-300 text-sm">
{children}
</td>
),
strong: ({ children }) => (
<strong className="font-bold text-primary/90 underline decoration-primary/30 underline-offset-4">
{children}
</strong>
),
hr: () => (
<hr className="my-12 border-t border-slate-800/80" />
),
}}
>
{children}
</ReactMarkdown>
</div>
);
}
|