DMleadgen
46d973904b
Next.js website for Rocky Mountain Vending company featuring: - Product catalog with Stripe integration - Service areas and parts pages - Admin dashboard with Clerk authentication - SEO optimized pages with JSON-LD structured data Co-authored-by: Cursor <cursoragent@cursor.com>
44 lines
1.3 KiB
TypeScript
44 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>
|
|
)
|
|
}
|
|
|