Rs_blog_front/src/components/post/PostCard.tsx

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>
  );
}