mirror change from https://github.com/binhkid2/FullStack-Blog-Nestjs-Nextjs-Postgres

frontend/components/post-card.tsx

@@ -0,0 +1,72 @@
+import Link from "next/link";
+import Image from "next/image";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { Eye } from "lucide-react";
+import { BlogPost } from "@/lib/types";
+
+interface PostCardProps {
+  post: BlogPost;
+}
+
+export function PostCard({ post }: PostCardProps) {
+  return (
+    <Card className="flex flex-col overflow-hidden hover:shadow-md transition-shadow h-full">
+      {post.featuredImageUrl && (
+        <Link href={`/blog/${post.slug}`} className="block overflow-hidden">
+          <div className="relative h-48 w-full">
+            <Image
+              src={post.featuredImageUrl}
+              alt={post.featuredImageAlt || post.title}
+              fill
+              className="object-cover transition-transform duration-300 hover:scale-[1.02]"
+              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            />
+          </div>
+        </Link>
+      )}
+
+      <CardContent className="flex-1 pt-4 pb-2">
+        {post.categories.length > 0 && (
+          <div className="mb-2 flex flex-wrap gap-1">
+            {post.categories.slice(0, 3).map((cat) => (
+              <Badge
+                key={cat}
+                variant="secondary"
+                className="text-xs uppercase tracking-wide"
+              >
+                {cat}
+              </Badge>
+            ))}
+          </div>
+        )}
+
+        <Link href={`/blog/${post.slug}`} className="group">
+          <h3 className="font-semibold leading-tight text-foreground group-hover:text-primary transition-colors line-clamp-2">
+            {post.title}
+          </h3>
+        </Link>
+
+        {post.excerpt && (
+          <p className="mt-2 text-sm text-muted-foreground line-clamp-3">
+            {post.excerpt}
+          </p>
+        )}
+      </CardContent>
+
+      <CardFooter className="pt-0 pb-4 px-6 flex flex-wrap gap-1.5 items-center justify-between">
+        <div className="flex flex-wrap gap-1">
+          {post.tags.slice(0, 3).map((tag) => (
+            <Badge key={tag} variant="outline" className="text-xs">
+              #{tag}
+            </Badge>
+          ))}
+        </div>
+        <span className="flex items-center gap-1 text-xs text-muted-foreground ml-auto">
+          <Eye className="h-3 w-3" />
+          {post.views.toLocaleString()}
+        </span>
+      </CardFooter>
+    </Card>
+  );
+}