54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import { cn } from '@/lib/utils';
|
|
|
|
type ImageCardProps = {
|
|
src: string;
|
|
alt: string;
|
|
eyebrow: string;
|
|
title: string;
|
|
description?: string;
|
|
className?: string;
|
|
};
|
|
|
|
/**
|
|
* Photo card with a caption over a dark scrim. The scrim stays dark in both
|
|
* themes because the photography itself is dark.
|
|
*/
|
|
export default function ImageCard({
|
|
src,
|
|
alt,
|
|
eyebrow,
|
|
title,
|
|
description,
|
|
className,
|
|
}: ImageCardProps) {
|
|
return (
|
|
<figure
|
|
className={cn(
|
|
'group relative flex min-h-72 flex-col justify-end overflow-hidden rounded-2xl bg-neutral-900 p-6 shadow-md',
|
|
className,
|
|
)}
|
|
>
|
|
<img
|
|
src={src}
|
|
alt={alt}
|
|
loading="lazy"
|
|
className="absolute inset-0 h-full w-full object-cover brightness-75 transition-transform duration-500 group-hover:scale-105"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent" />
|
|
<figcaption className="relative flex flex-col gap-1">
|
|
<span className="font-mono text-[11px] font-bold tracking-wider text-rose-300 uppercase">
|
|
{eyebrow}
|
|
</span>
|
|
<span className="font-display text-lg font-bold text-white">
|
|
{title}
|
|
</span>
|
|
{description && (
|
|
<span className="text-sm text-neutral-300">
|
|
{description}
|
|
</span>
|
|
)}
|
|
</figcaption>
|
|
</figure>
|
|
);
|
|
}
|