65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
'use client'
|
|
|
|
import Image from 'next/image'
|
|
import { useState } from 'react'
|
|
|
|
interface OptimizedImageProps {
|
|
src: string
|
|
alt: string
|
|
caption?: string
|
|
width?: number
|
|
height?: number
|
|
priority?: boolean
|
|
className?: string
|
|
}
|
|
|
|
export function OptimizedImage({
|
|
src,
|
|
alt,
|
|
caption,
|
|
width = 800,
|
|
height = 600,
|
|
priority = false,
|
|
className = '',
|
|
}: OptimizedImageProps) {
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [hasError, setHasError] = useState(false)
|
|
|
|
if (hasError) {
|
|
return (
|
|
<div className="my-8 rounded-lg border border-zinc-800 bg-zinc-900/50 p-8 text-center">
|
|
<p className="text-zinc-400">Failed to load image</p>
|
|
{caption && <p className="mt-2 text-sm text-zinc-500">{caption}</p>}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<figure className={`my-8 ${className}`}>
|
|
<div className="relative overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900/50">
|
|
<Image
|
|
src={src}
|
|
alt={alt}
|
|
width={width}
|
|
height={height}
|
|
priority={priority}
|
|
style={{ maxWidth: '100%', height: 'auto' }}
|
|
className={`transition-opacity duration-300 ${isLoading ? 'opacity-0' : 'opacity-100'}`}
|
|
onLoad={() => setIsLoading(false)}
|
|
onError={() => setHasError(true)}
|
|
placeholder="blur"
|
|
blurDataURL="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Crect width='400' height='300' fill='%2318181b'/%3E%3C/svg%3E"
|
|
/>
|
|
{isLoading && (
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className="h-8 w-8 animate-spin rounded-full border-2 border-emerald-500 border-t-transparent" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
{caption && (
|
|
<figcaption className="mt-3 text-center text-sm text-zinc-400">{caption}</figcaption>
|
|
)}
|
|
</figure>
|
|
)
|
|
}
|