51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import { Box } from "@mui/material";
|
|
import ReactMarkdown from "react-markdown";
|
|
import rehypeRaw from "rehype-raw";
|
|
|
|
export const ReactMarkdownComponent = ({ value }: { value: string }) => {
|
|
return (
|
|
<Box
|
|
className="prose prose-sm prose-invert w-full"
|
|
sx={{
|
|
"& img": {
|
|
maxWidth: "100%",
|
|
height: "auto",
|
|
borderRadius: 1,
|
|
},
|
|
"& h1, & h2, & h3, & h4, & h5, & h6": {
|
|
color: "white",
|
|
mt: 2,
|
|
mb: 1,
|
|
},
|
|
"& p": {
|
|
mb: 2,
|
|
color: "white",
|
|
},
|
|
"& a": {
|
|
color: "white",
|
|
textDecoration: "none",
|
|
"&:hover": {
|
|
textDecoration: "underline",
|
|
},
|
|
},
|
|
"& blockquote": {
|
|
borderLeft: "4px solid",
|
|
borderColor: "primary.main",
|
|
pl: 2,
|
|
my: 2,
|
|
color: "text.secondary",
|
|
},
|
|
"& code": {
|
|
bgcolor: (theme) =>
|
|
theme.palette.mode === "dark" ? "grey.900" : "grey.100",
|
|
p: 0.5,
|
|
borderRadius: 0.5,
|
|
color: "primary.main",
|
|
},
|
|
}}
|
|
>
|
|
<ReactMarkdown rehypePlugins={[rehypeRaw]}>{value}</ReactMarkdown>
|
|
</Box>
|
|
);
|
|
};
|