init

app/[locale]/blog/BlogCard.tsx

@@ -0,0 +1,31 @@
+import { Link as I18nLink } from "@/i18n/routing";
+import { BlogPost } from "@/types/blog";
+import dayjs from "dayjs";
+import Image from "next/image";
+
+export function BlogCard({ post, locale }: { post: BlogPost; locale: string }) {
+  return (
+    <I18nLink
+      href={`/blog${post.slug}`}
+      prefetch={false}
+      className="bg-transparent rounded-lg hover:underline"
+    >
+      <div className="relative rounded shadow-md  pt-[56.25%]">
+        <Image
+          src={post.image || "/placeholder.svg"}
+          alt={post.title}
+          fill
+          className="object-cover shadow-sm w-full rounded hover:shadow-lg transition-shadow duration-200 h-[200p]"
+        />
+      </div>
+      <div className="py-3 flex-1 flex flex-col">
+        <h2 className="text-lg font-500 line-clamp-2 flex-grow">
+          {post.title}
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400 text-sm mt-2">
+          {dayjs(post.date).format("YYYY-MM-DD")}
+        </p>
+      </div>
+    </I18nLink>
+  );
+}