first commit

src/components/post/PostCard.tsx

@@ -0,0 +1,58 @@
+import Link from "next/link";
+import Image from "next/image";
+import { PostMeta } from "./PostMeta";
+import type { Post } from "@/types/api";
+
+interface PostCardProps {
+  post: Post;
+}
+
+export function PostCard({ post }: PostCardProps) {
+  return (
+    <article className="grid grid-cols-12 gap-6 md:gap-12 mb-24">
+      {post.cover_image && (
+        <div className="col-span-12 md:col-span-5">
+          <Link href={`/posts/${post.id}`}>
+            <div className="aspect-[3/2] overflow-hidden bg-neutral-100">
+              <Image
+                src={post.cover_image}
+                alt={post.title}
+                width={600}
+                height={400}
+                className="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
+              />
+            </div>
+          </Link>
+        </div>
+      )}
+
+      <div
+        className={
+          post.cover_image
+            ? "col-span-12 md:col-span-7 flex flex-col justify-center"
+            : "col-span-12 flex flex-col justify-center"
+        }
+      >
+        <PostMeta date={post.created_at} />
+
+        <Link href={`/posts/${post.id}`}>
+          <h2 className="text-3xl md:text-5xl font-bold tracking-tighter mt-4 hover:opacity-70 transition-opacity leading-tight">
+            {post.title}
+          </h2>
+        </Link>
+
+        <p className="text-neutral-600 mt-6 leading-relaxed line-clamp-3">
+          {post.content.slice(0, 200).replace(/[#*`]/g, "")}
+          {post.content.length > 200 ? "..." : ""}
+        </p>
+
+        <Link
+          href={`/posts/${post.id}`}
+          className="mt-6 text-sm font-bold tracking-widest uppercase border-b border-black pb-0.5 hover:border-transparent transition-colors self-start"
+        >
+          Read More
+        </Link>
+      </div>
+    </article>
+  );
+}