image-card

1import { cn } from "@/lib/utils"
2
3type Props = {
4  imageUrl: string
5  caption: string
6  className?: string
7}
8
9export default function ImageCard({ imageUrl, caption, className }: Props) {
10  return (
11    <figure
12      className={cn(
13        "w-[250px] overflow-hidden rounded-base border-2 border-border bg-main font-base shadow-shadow",
14        className,
15      )}
16    >
17      <img className="w-full aspect-4/3" src={imageUrl} alt="image" />
18      <figcaption className="border-t-2 text-main-foreground border-border p-4">
19        {caption}
20      </figcaption>
21    </figure>
22  )
23}
24