peer-at-code-web/ui/ToHTML.tsx
2023-04-18 13:29:03 +02:00

35 lines
942 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: ({ ...props }) => (
<a
{...props}
className="text-brand hover:text-brand/80 hover:underline"
// MAKE thIS SHIT DOWNLOAD
target="_blank"
rel="noopener"
/>
),
code: ({ ...props }) => (
<code
{...props}
className="cursor-pointer select-none text-transparent hover:text-highlight-secondary"
/>
)
}}
remarkPlugins={[remarkGfm, remarkBreaks]}
>
{data}
</Mardown>
</div>
);
}