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