first commit

src/components/post/PostContent.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import rehypeHighlight from "rehype-highlight";
+import remarkGfm from "remark-gfm";
+
+interface PostContentProps {
+  content: string;
+}
+
+export function PostContent({ content }: PostContentProps) {
+  return (
+    <div className="prose prose-lg max-w-none prose-headings:tracking-tight prose-headings:font-bold prose-p:leading-relaxed prose-p:text-neutral-700 prose-a:border-b prose-a:border-black prose-a:no-underline hover:prose-a:border-transparent prose-img:my-8 prose-pre:bg-[#f6f8fa] prose-pre:p-6 prose-code:font-mono prose-code:text-base">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeHighlight]}
+        components={{
+          img: ({ src, alt }) => (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={src}
+              alt={alt || ""}
+              className="w-full aspect-video object-cover my-8"
+            />
+          ),
+          pre: ({ children }) => (
+            <pre className="bg-[#f6f8fa] p-6 font-mono text-base overflow-x-auto text-black rounded-none border border-neutral-200">
+              {children}
+            </pre>
+          ),
+          code: ({ className, children, ...props }) => {
+            const isInline = !className;
+            if (isInline) {
+              return (
+                <code className="bg-neutral-100 px-1.5 py-0.5 font-mono text-base text-black" {...props}>
+                  {children}
+                </code>
+              );
+            }
+            return (
+              <code className={className} {...props}>
+                {children}
+              </code>
+            );
+          },
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}