35 lines
1 KiB
TypeScript
35 lines
1 KiB
TypeScript
'use client';
|
|
|
|
import { cn } from '@/lib/utils';
|
|
import Mardown from 'react-markdown';
|
|
import remarkBreaks from 'remark-breaks';
|
|
import remarkGfm from 'remark-gfm';
|
|
|
|
export default function ToHTML({ data, className }: { data: string; className?: string }) {
|
|
return (
|
|
<div className={cn(className)}>
|
|
<Mardown
|
|
components={{
|
|
a: ({ node, ...props }) => (
|
|
<a
|
|
{...props}
|
|
className="inline text-brand transition-colors duration-150 hover:text-brand-accent hover:underline"
|
|
// MAKE thIS SHIT DOWNLOADABLE
|
|
target="_blank"
|
|
rel="noopener"
|
|
/>
|
|
),
|
|
code: ({ node, ...props }) => (
|
|
<code
|
|
{...props}
|
|
className="cursor-default select-none text-transparent transition-colors delay-150 hover:text-highlight-secondary"
|
|
/>
|
|
)
|
|
}}
|
|
remarkPlugins={[remarkGfm, remarkBreaks]}
|
|
>
|
|
{data}
|
|
</Mardown>
|
|
</div>
|
|
);
|
|
}
|