Blog 01

1import { cn } from "@/lib/utils";
2import { Badge } from "@/components/ui/badge";
3import { Card, CardContent } from "@/components/ui/card";
4import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
5 
6interface Author {
7  name: string;
8  avatar?: string;
9}
10 
11interface BlogPost {
12  img?: string;
13  category: string;
14  readTime: string;
15  title: string;
16  description: string;
17  author: Author;
18  date: string;
19  href?: string;
20}
21 
22interface Blog01Props {
23  label?: string;
24  title?: string;
25  description?: string;
26  posts?: BlogPost[];
27  className?: string;
28}
29 
30const BlogCard = ({
31  img,
32  category,
33  readTime,
34  title,
35  description,
36  author,
37  date,
38  href = "#",
39}: BlogPost) => (
40  <Card className="group overflow-hidden bg-transparent py-0 shadow-none">
41    <a href={href} className="flex flex-col">
42      <div className="aspect-4/3 w-full overflow-hidden rounded-t-md bg-muted/30">
43        {img && (
44          <img
45            src={img}
46            alt={title}
47            className="size-full object-cover transition-transform duration-300 group-hover:scale-105"
48          />
49        )}
50      </div>
51      <CardContent className="flex flex-col gap-4 p-4">
52        <div className="flex items-center justify-between">
53          <Badge variant="secondary" className="rounded-full font-normal">
54            {category}
55          </Badge>
56          <span className="text-sm text-muted-foreground">{readTime}</span>
57        </div>
58        <div className="flex flex-col gap-2">
59          <h3 className="text-lg leading-snug font-medium group-hover:underline">
60            {title}
61          </h3>
62          <p className="line-clamp-2 text-sm text-muted-foreground">
63            {description}
64          </p>
65        </div>
66        <div className="flex items-center gap-2">
67          <Avatar className="size-8">
68            <AvatarImage src={author.avatar} alt={author.name} />
69            <AvatarFallback className="bg-muted/30" />
70          </Avatar>
71          <div className="flex flex-col gap-0 text-xs">
72            <p className="t font-medium">{author.name}</p>
73            <p className="text-muted-foreground">{date}</p>
74          </div>
75        </div>
76      </CardContent>
77    </a>
78  </Card>
79);
80 
81const Blog01 = ({
82  label = "Blog",
83  title = "Latest Articles",
84  description = "Discover insights, tutorials, and best practices to build better products faster.",
85  posts = [
86    {
87      img: "https://www.shadcnship.com/images/placeholders/hero-architecture-10.webp",
88// … truncated