fix(studio-panel): safe defaults for MediaGrid and fallback image handler

This commit is contained in:
Cesar Mendivil 2025-11-10 12:08:12 -07:00
parent fdff18e320
commit 1a28c0eae7

View File

@ -0,0 +1,35 @@
// ...existing code...
type MediaGridProps = {
items?: string[]
columns?: number
}
export default function MediaGrid({ items = ['/figma-assets/screenshot-design.png'], columns = 3 }: MediaGridProps) {
const colsClass = columns === 1 ? 'grid-cols-1' : columns === 2 ? 'grid-cols-2' : 'grid-cols-3'
const handleImgError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
const target = e.currentTarget
// fallback to a safe small logo if the image fails to load
if (!target.dataset.fallbackApplied) {
target.dataset.fallbackApplied = 'true'
target.src = '/figma-assets/logo-avanzacast.svg'
}
}
return (
<div className={`grid ${colsClass} gap-figma-lg`}>
{items.map((src, i) => (
<div key={i} className="rounded-figma-card overflow-hidden bg-neutral-800/30">
<img
src={src}
alt={`media-${i}`}
className="w-full h-28 object-cover"
loading="lazy"
onError={handleImgError}
/>
</div>
))}
</div>
)
}