Article Card

1import * as React from "react";
2import {
3  Card,
4  CardDescription,
5  CardFooter,
6  CardHeader,
7  CardHeading,
8  CardImage,
9  CardTitle,
10  type CardProps,
11} from "@/components/ui/atoms/card";
12import { Badge } from "@/components/ui/atoms/badge";
13import { cn } from "@/lib/utils";
14 
15export interface ArticleCardProps extends Omit<CardProps, "title"> {
16  image?: string;
17  category?: string;
18  title: string;
19  excerpt?: string;
20  author?: { name: string; avatar?: string };
21  date?: string;
22  readTime?: string;
23  href?: string;
24}
25 
26const ArticleCard = React.forwardRef<HTMLDivElement, ArticleCardProps>(
27  ({ author, category, className, date, excerpt, href, image, readTime, title, ...props }, ref) => {
28    const content = (
29      <Card
30        ref={ref}
31        variant="interactive"
32        className={cn("group overflow-hidden", className)}
33        {...props}
34      >
35        {image && (
36          <CardImage>
37            <img
38              src={image}
39              alt=""
40              className="size-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
41            />
42          </CardImage>
43        )}
44        <CardHeader>
45          <CardHeading>
46            {category && (
47              <Badge size="sm" variant="outline" className="mb-1">
48                {category}
49              </Badge>
50            )}
51            <CardTitle>{title}</CardTitle>
52            {excerpt && <CardDescription>{excerpt}</CardDescription>}
53          </CardHeading>
54        </CardHeader>
55        {(author || date || readTime) && (
56          <CardFooter className="text-xs text-muted-foreground">
57            <div className="flex flex-wrap items-center gap-2">
58              {author?.avatar && (
59                <img src={author.avatar} alt="" className="size-6 rounded-full object-cover" />
60              )}
61              {author && <span className="font-medium text-foreground">{author.name}</span>}
62              {date && <span>{date}</span>}
63              {readTime && <span>{readTime}</span>}
64            </div>
65          </CardFooter>
66        )}
67      </Card>
68    );
69    return href ? (
70      <a href={href} className="block text-inherit no-underline">
71        {content}
72      </a>
73    ) : (
74      content
75    );
76  },
77);
78ArticleCard.displayName = "ArticleCard";
79export { ArticleCard };