init: Init React Application

src/widgets/ReactMarkdown/index.tsx

@@ -0,0 +1,50 @@
+import { Box } from "@mui/material";
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+
+export const ReactMarkdownComponent = ({ value }: { value: string }) => {
+  return (
+    <Box
+      sx={{
+        "& img": {
+          maxWidth: "100%",
+          height: "auto",
+          borderRadius: 1,
+        },
+        "& h1, & h2, & h3, & h4, & h5, & h6": {
+          color: "primary.main",
+          mt: 2,
+          mb: 1,
+        },
+        "& p": {
+          mb: 2,
+          color: (theme) =>
+            theme.palette.mode === "dark" ? "grey.300" : "grey.800",
+        },
+        "& a": {
+          color: "primary.main",
+          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>
+  );
+};