Blog Page

1import Image from "next/image";
2import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
3import { Card, CardContent } from "@/components/ui/card";
4import type { RegularBlogPost } from "../blog-posts";
5import Link from "next/link";
6 
7export function BlogPostCard({ post }: { post: RegularBlogPost }) {
8  return (
9    <Link href="#" className="block transition-opacity hover:opacity-80">
10      <Card className="overflow-hidden py-0 shadow-none gap-0">
11        <Image
12          src={post.imageSrc}
13          alt={post.imageAlt}
14          width={400}
15          height={225}
16          className="aspect-video w-full object-cover"
17        />
18        <CardContent className="grid gap-2 p-4">
19          <h3 className="text-lg leading-relaxed font-semibold line-clamp-2">{post.title}</h3>
20          <p className="text-muted-foreground line-clamp-2 text-sm">{post.description}</p>
21          <div className="text-muted-foreground flex items-center gap-2 text-xs">
22            <Avatar className="h-6 w-6">
23              <AvatarImage src={post.authorAvatarSrc} />
24              <AvatarFallback>
25                {post.authorName
26                  .split(" ")
27                  .map((n: string) => n[0])
28                  .join("")}
29              </AvatarFallback>
30            </Avatar>
31            <span>{post.authorName}</span>
32            <span>•</span>
33            <span>{post.readTime} read</span>
34          </div>
35        </CardContent>
36      </Card>
37    </Link>
38  );
39}