35 lines
963 B
TypeScript
35 lines
963 B
TypeScript
'use client';
|
|
|
|
import { cn } from '@/lib/utils';
|
|
import Mardown from 'react-markdown';
|
|
import remarkGfm from 'remark-gfm';
|
|
import remarkBreaks from 'remark-breaks';
|
|
|
|
export default function ToHTML({ data, className }: { data: string; className?: string }) {
|
|
return (
|
|
<div className={cn(className)}>
|
|
<Mardown
|
|
components={{
|
|
a: ({ node, ...props }) => (
|
|
<a
|
|
{...props}
|
|
className="text-brand hover:text-brand/80 hover:underline"
|
|
download={node}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
/>
|
|
),
|
|
code: ({ ...props }) => (
|
|
<span
|
|
{...props}
|
|
className="cursor-pointer select-none rounded bg-black p-0.5 text-black hover:bg-transparent hover:text-white"
|
|
/>
|
|
)
|
|
}}
|
|
remarkPlugins={[remarkGfm, remarkBreaks]}
|
|
>
|
|
{data}
|
|
</Mardown>
|
|
</div>
|
|
);
|
|
}
|