feat(blog): redesign post list cards

src/components/BlogThumbnail.tsx

@@ -0,0 +1,58 @@
+import type * as Types from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+type BlogThumbnailProps = {
+  post: Pick<Types.PostListSchema, "title" | "category" | "absolute_featured_image_thumbnail_url" | "absolute_featured_image_preview_url" | "absolute_featured_image_url" | "featured_image">;
+  imageUrl?: string | null;
+  className?: string;
+  imageClassName?: string;
+  priority?: boolean;
+};
+
+function initials(title: string) {
+  return title
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0])
+    .join("");
+}
+
+export default function BlogThumbnail({
+  post,
+  imageUrl,
+  className,
+  imageClassName,
+  priority = false,
+}: BlogThumbnailProps) {
+  if (imageUrl) {
+    return (
+      <div className={cn("overflow-hidden bg-muted", className)}>
+        <img
+          src={imageUrl}
+          alt={post.title}
+          className={cn("h-full w-full object-cover transition duration-500 group-hover:scale-[1.03]", imageClassName)}
+          loading={priority ? "eager" : "lazy"}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "relative overflow-hidden bg-[radial-gradient(circle_at_20%_20%,rgba(34,197,94,0.28),transparent_32%),linear-gradient(135deg,#0f3d2e,#163f59_52%,#111827)] text-white",
+        className,
+      )}
+    >
+      <div className="absolute inset-0 bg-[linear-gradient(45deg,rgba(255,255,255,0.08)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.08)_50%,rgba(255,255,255,0.08)_75%,transparent_75%,transparent)] bg-[length:28px_28px] opacity-25" />
+      <div className="relative flex h-full flex-col items-center justify-center gap-3 p-6 text-center">
+        <span className="rounded-full border border-white/25 bg-white/15 px-3 py-1 text-xs backdrop-blur">
+          {post.category?.name || "بلاگ"}
+        </span>
+        <span className="text-5xl font-black tracking-tight">{initials(post.title) || "گـ"}</span>
+      </div>
+    </div>
+  );
+}