51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import Image from "next/image"
|
|
|
|
interface MovingServiceImageProps {
|
|
src: string
|
|
alt: string
|
|
}
|
|
|
|
export function MovingServiceImage({ src, alt }: MovingServiceImageProps) {
|
|
const [imageError, setImageError] = useState(false)
|
|
|
|
if (imageError) {
|
|
return (
|
|
<div
|
|
className="relative w-full bg-muted flex items-center justify-center"
|
|
style={{ aspectRatio: "auto", minHeight: "300px" }}
|
|
>
|
|
<div className="text-center p-4">
|
|
<p className="text-sm text-muted-foreground mb-2">
|
|
Image coming soon
|
|
</p>
|
|
<p className="text-xs text-muted-foreground/70">{alt}</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="relative w-full bg-muted flex items-center justify-center py-6"
|
|
style={{ minHeight: "300px" }}
|
|
>
|
|
<div className="relative w-full h-full flex items-center justify-center">
|
|
<Image
|
|
src={src}
|
|
alt={alt}
|
|
width={800}
|
|
height={1200}
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
|
className="w-auto h-auto max-w-full max-h-[600px] object-contain"
|
|
style={{
|
|
display: "block",
|
|
}}
|
|
onError={() => setImageError(true)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|