51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import Image, { StaticImageData } from 'next/image';
|
|
import { ImageIcon } from 'lucide-react';
|
|
|
|
interface BlogImageProps {
|
|
src: string | StaticImageData;
|
|
alt: string;
|
|
caption?: string;
|
|
fullWidth?: boolean;
|
|
}
|
|
|
|
export const BlogImage = ({
|
|
src,
|
|
alt,
|
|
caption,
|
|
fullWidth = false,
|
|
}: BlogImageProps) => {
|
|
const isStaticImage = typeof src !== 'string';
|
|
|
|
return (
|
|
<figure className={`my-8 group ${fullWidth ? '-mx-6' : ''}`}>
|
|
<div className="overflow-hidden rounded-xl border border-gray-200 shadow-lg transition-all duration-300 hover:shadow-xl">
|
|
{isStaticImage ? (
|
|
<Image
|
|
src={src}
|
|
alt={alt}
|
|
placeholder="blur"
|
|
className="w-full h-auto"
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 66vw, 800px"
|
|
/>
|
|
) : (
|
|
<div className="relative aspect-video bg-gray-100">
|
|
<Image
|
|
src={src}
|
|
alt={alt}
|
|
fill
|
|
className="object-cover"
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 66vw, 800px"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{caption && (
|
|
<figcaption className="mt-4 flex items-center justify-center gap-2 text-sm text-gray-500">
|
|
<ImageIcon className="w-4 h-4" />
|
|
<span>{caption}</span>
|
|
</figcaption>
|
|
)}
|
|
</figure>
|
|
);
|
|
};
|