36 lines
850 B
TypeScript
36 lines
850 B
TypeScript
type PlaceholderProps = {
|
|
src: string;
|
|
alt?: string;
|
|
width: string;
|
|
height?: string;
|
|
label?: string;
|
|
className?: string;
|
|
};
|
|
|
|
export function Placeholder({
|
|
src,
|
|
alt = "",
|
|
width,
|
|
height,
|
|
label,
|
|
className = "",
|
|
}: PlaceholderProps) {
|
|
return (
|
|
<div
|
|
className={`relative flex shrink-0 items-center justify-center overflow-hidden border border-dashed border-red-muted/60 bg-red-light/40 ${className}`}
|
|
style={{ width, ...(height ? { height } : {}) }}
|
|
>
|
|
<img
|
|
src={src}
|
|
alt={alt}
|
|
className="absolute inset-0 h-full w-full object-cover"
|
|
/>
|
|
{label && (
|
|
<span className="font-display pointer-events-none relative z-10 rounded bg-white/70 px-1.5 py-0.5 text-xs tracking-wider text-red-dark/50 uppercase">
|
|
{label}
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|