fix(studio-panel): safe defaults for MediaGrid and fallback image handler
This commit is contained in:
parent
fdff18e320
commit
1a28c0eae7
@ -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>
|
||||
)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user