md

src/components/ui/MarkdownText/MarkdownText.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import ReactMarkdown from "react-markdown";
+import ReactMarkdown, { type Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
 
 import styles from "./MarkdownText.module.scss";
@@ -14,11 +14,7 @@ export default function MarkdownText({
   content,
   className,
 }: MarkdownTextProps) {
-  return (
+  const components: Components = {
-    <div className={`${styles.markdown} ${className || ""}`}>
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
-        components={{
     h1: ({ ...props }) => <h1 className={styles.h1} {...props} />,
     h2: ({ ...props }) => <h2 className={styles.h2} {...props} />,
     h3: ({ ...props }) => <h3 className={styles.h3} {...props} />,
@@ -30,7 +26,8 @@ export default function MarkdownText({
     strong: ({ ...props }) => <strong className={styles.bold} {...props} />,
     em: ({ ...props }) => <em className={styles.italic} {...props} />,
     pre: ({ ...props }) => <pre className={styles.codeBlock} {...props} />,
-          code: ({ inline, ...props }: any) =>
+    // @ts-expect-error - inline prop is provided by react-markdown
+    code: ({ inline, ...props }) =>
       inline ? (
         <code className={styles.inlineCode} {...props} />
       ) : (
@@ -41,8 +38,11 @@ export default function MarkdownText({
     a: ({ ...props }) => (
       <a className={styles.link} target="_blank" rel="noopener noreferrer" {...props} />
     ),
-        }}
+  };
-      >
+
+  return (
+    <div className={`${styles.markdown} ${className || ""}`}>
+      <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
         {content}
       </ReactMarkdown>
     </div>