Blogs listing + Categories

frontend/components/blog-card.tsx

@@ -0,0 +1,39 @@
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { Blog } from "@/types/types";
+import { ArrowRight } from "lucide-react";
+import Link from "next/link";
+import { Badge } from "./ui/badge";
+
+export function BlogCard({ blog }: { blog: Blog }) {
+	return (
+		<Card className="overflow-hidden border border-border rounded-xl">
+			<Link href={`/blogs/${blog.slug}`} className="block">
+				<img
+					src={blog.image}
+					alt={blog.title}
+					className="aspect-[16/9] w-full object-cover object-center"
+				/>
+			</Link>
+			<CardContent className="px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
+				<h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
+					{blog.title}
+				</h3>
+				<p className="mb-3 text-muted-foreground md:mb-4 lg:mb-6">
+					{blog.summary}
+				</p>
+				<Link
+					href={`/blogs/${blog.slug}`}
+					className="flex items-center hover:underline"
+				>
+					En savoir plus
+					<ArrowRight className="ml-2 size-4" />
+				</Link>
+			</CardContent>
+			{blog.category && (
+				<CardFooter>
+					<Badge>{blog.category}</Badge>
+				</CardFooter>
+			)}
+		</Card>
+	);
+}