12 lines
772 B
TypeScript
12 lines
772 B
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
|
|
export function PhotoPreview({ photo, alt }: { photo: { url: string; fallback?: string }; alt: string }) {
|
|
const [failed, setFailed] = useState(false)
|
|
|
|
// Signed storage URLs must bypass Next's image optimizer and remote-host allowlist.
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
return <div className="relative flex aspect-video items-center justify-center overflow-hidden border border-wedding-line bg-wedding-cream"><img src={photo.url} alt={alt} onError={() => setFailed(true)} className={`size-full object-contain ${failed ? "hidden" : ""}`} referrerPolicy="no-referrer" />{failed ? <p className="px-6 text-center font-wedding-ui text-sm text-wedding-ink">{photo.fallback ?? alt}</p> : null}</div>
|
|
}
|