apps/web/src/components/ui/react-markdown-wrapper.tsx


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

import ReactMarkdown from "react-markdown";
import { cn } from "@/utils/ui";

export function ReactMarkdownWrapper({ children }: { children: string }) {
	return (
		<ReactMarkdown
			components={{
				a: ({ className: linkClassName, children, ...props }) => (
					<a
						className={cn("text-primary hover:underline", linkClassName)}
						target="_blank"
						rel="noopener noreferrer"
						{...props}
					>
						{children}
					</a>
				),
				strong: ({ children }) => (
					<strong className="text-foreground font-semibold">{children}</strong>
				),
			}}
		>
			{children}
		</ReactMarkdown>
	);
}