Image 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 ImageCardProps extends Omit<CardProps, "title"> {
7  image: string;
8  title: string;
9  description?: string;
10  badge?: string;
11  href?: string;
12}
13const ImageCard = React.forwardRef<HTMLDivElement, ImageCardProps>(
14  ({ badge, className, description, href, image, title, ...props }, ref) => {
15    const content = (
16      <Card
17        ref={ref}
18        variant="interactive"
19        className={cn("group relative aspect-[4/3] overflow-hidden", className)}
20        {...props}
21      >
22        <img
23          src={image}
24          alt=""
25          className="absolute inset-0 size-full object-cover transition-transform duration-500 ease-[var(--poyraz-motion-ease-out)] group-hover:scale-105"
26        />
27        <div className="absolute inset-0 bg-gradient-to-t from-overlay via-overlay/20 to-transparent transition-opacity group-hover:opacity-90" />
28        {badge && <Badge className="absolute left-3 top-3 z-10">{badge}</Badge>}
29        <div className="absolute inset-x-0 bottom-0 z-10 p-4 text-primary-foreground">
30          <h3 className="font-semibold leading-tight">{title}</h3>
31          {description && <p className="mt-1 line-clamp-2 text-xs opacity-80">{description}</p>}
32        </div>
33      </Card>
34    );
35    return href ? (
36      <a href={href} className="block text-inherit no-underline">
37        {content}
38      </a>
39    ) : (
40      content
41    );
42  },
43);
44ImageCard.displayName = "ImageCard";
45export { ImageCard };