News Card

1import * as React from "react";
2import { Badge } from "@/components/ui/atoms/badge";
3import { Card, type CardProps } from "@/components/ui/atoms/card";
4import { cn } from "@/lib/utils";
5 
6export interface NewsCardProps extends Omit<CardProps, "title"> {
7  image?: string;
8  category?: string;
9  title: string;
10  date?: string;
11  href?: string;
12}
13const NewsCard = React.forwardRef<HTMLDivElement, NewsCardProps>(
14  ({ category, className, date, href, image, title, ...props }, ref) => {
15    const content = (
16      <Card
17        ref={ref}
18        variant="interactive"
19        className={cn("group h-fit self-start overflow-hidden", className)}
20        {...props}
21      >
22        <div className="flex min-h-28">
23          {image && (
24            <div className="w-28 shrink-0 overflow-hidden border-r border-border">
25              <img
26                src={image}
27                alt=""
28                className="size-full object-cover transition-transform duration-300 group-hover:scale-105"
29              />
30            </div>
31          )}
32          <div className="flex min-w-0 flex-col justify-center gap-2 p-4">
33            {category && (
34              <Badge size="sm" variant="outline">
35                {category}
36              </Badge>
37            )}
38            <h3 className="line-clamp-2 text-sm font-semibold leading-snug">{title}</h3>
39            {date && <span className="text-xs text-muted-foreground">{date}</span>}
40          </div>
41        </div>
42      </Card>
43    );
44    return href ? (
45      <a href={href} className="block text-inherit no-underline">
46        {content}
47      </a>
48    ) : (
49      content
50    );
51  },
52);
53NewsCard.displayName = "NewsCard";
54export { NewsCard };