Get rid of custom components folder

components/markdown.tsx

@@ -0,0 +1,120 @@
+import Link from 'next/link';
+import React, { memo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+const NonMemoizedMarkdown = ({ children }: { children: string }) => {
+  const components = {
+    code: ({ node, inline, className, children, ...props }: any) => {
+      const match = /language-(\w+)/.exec(className || '');
+      return !inline && match ? (
+        <pre
+          {...props}
+          className={`${className} text-sm w-[80dvw] md:max-w-[500px] overflow-x-scroll bg-zinc-100 p-3 rounded-lg mt-2 dark:bg-zinc-800`}
+        >
+          <code className={match[1]}>{children}</code>
+        </pre>
+      ) : (
+        <code
+          className={`${className} text-sm bg-zinc-100 dark:bg-zinc-800 py-0.5 px-1 rounded-md`}
+          {...props}
+        >
+          {children}
+        </code>
+      );
+    },
+    ol: ({ node, children, ...props }: any) => {
+      return (
+        <ol className="list-decimal list-outside ml-4" {...props}>
+          {children}
+        </ol>
+      );
+    },
+    li: ({ node, children, ...props }: any) => {
+      return (
+        <li className="py-1" {...props}>
+          {children}
+        </li>
+      );
+    },
+    ul: ({ node, children, ...props }: any) => {
+      return (
+        <ul className="list-decimal list-outside ml-4" {...props}>
+          {children}
+        </ul>
+      );
+    },
+    strong: ({ node, children, ...props }: any) => {
+      return (
+        <span className="font-semibold" {...props}>
+          {children}
+        </span>
+      );
+    },
+    a: ({ node, children, ...props }: any) => {
+      return (
+        <Link
+          className="text-blue-500 hover:underline"
+          target="_blank"
+          rel="noreferrer"
+          {...props}
+        >
+          {children}
+        </Link>
+      );
+    },
+    h1: ({ node, children, ...props }: any) => {
+      return (
+        <h1 className="text-3xl font-semibold mt-6 mb-2" {...props}>
+          {children}
+        </h1>
+      );
+    },
+    h2: ({ node, children, ...props }: any) => {
+      return (
+        <h2 className="text-2xl font-semibold mt-6 mb-2" {...props}>
+          {children}
+        </h2>
+      );
+    },
+    h3: ({ node, children, ...props }: any) => {
+      return (
+        <h3 className="text-xl font-semibold mt-6 mb-2" {...props}>
+          {children}
+        </h3>
+      );
+    },
+    h4: ({ node, children, ...props }: any) => {
+      return (
+        <h4 className="text-lg font-semibold mt-6 mb-2" {...props}>
+          {children}
+        </h4>
+      );
+    },
+    h5: ({ node, children, ...props }: any) => {
+      return (
+        <h5 className="text-base font-semibold mt-6 mb-2" {...props}>
+          {children}
+        </h5>
+      );
+    },
+    h6: ({ node, children, ...props }: any) => {
+      return (
+        <h6 className="text-sm font-semibold mt-6 mb-2" {...props}>
+          {children}
+        </h6>
+      );
+    },
+  };
+
+  return (
+    <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
+      {children}
+    </ReactMarkdown>
+  );
+};
+
+export const Markdown = memo(
+  NonMemoizedMarkdown,
+  (prevProps, nextProps) => prevProps.children === nextProps.children
+);