40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
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>
|
|
);
|
|
}
|