65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
"use client";
|
|
import React from "react";
|
|
import Image from "next/image";
|
|
import { Sparkles } from "lucide-react";
|
|
import { cn } from "../lib/utils";
|
|
|
|
interface SafeImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> {
|
|
src?: string;
|
|
alt?: string;
|
|
className?: string;
|
|
imgClassName?: string;
|
|
fallbackText?: string;
|
|
}
|
|
|
|
export default function SafeImage({
|
|
src,
|
|
alt = "تصویر مکمل کنینا",
|
|
className,
|
|
imgClassName,
|
|
fallbackText = "در حال بروزرسانی تصویر..."
|
|
}: SafeImageProps) {
|
|
const [error, setError] = React.useState(false);
|
|
const [loading, setLoading] = React.useState(true);
|
|
|
|
if (!src || error) {
|
|
return (
|
|
<div className={cn(
|
|
"flex flex-col items-center justify-center bg-medical-gray-50/80 border border-medical-gray-100 p-1.5 text-center w-full h-full rounded-2xl relative overflow-hidden select-none",
|
|
className
|
|
)}>
|
|
<div className="w-8 h-8 sm:w-10 sm:h-10 bg-canina-blue rounded-xl flex items-center justify-center text-white font-black text-base sm:text-lg shadow-sm italic shrink-0">
|
|
C
|
|
</div>
|
|
<span className="text-[8px] font-black text-canina-blue/70 font-vazir leading-tight mt-1 line-clamp-1">
|
|
{fallbackText}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={cn("relative overflow-hidden group flex items-center justify-center", className)}>
|
|
{loading && (
|
|
<div className="absolute inset-0 bg-medical-gray-50 animate-pulse flex items-center justify-center z-10">
|
|
<Sparkles className="w-6 h-6 text-canina-blue/20" />
|
|
</div>
|
|
)}
|
|
<Image
|
|
src={src}
|
|
alt={alt}
|
|
width={500}
|
|
height={500}
|
|
unoptimized
|
|
className={cn(
|
|
"transition-all duration-700 w-full h-full",
|
|
imgClassName,
|
|
loading ? "opacity-0 scale-110" : "opacity-100 scale-100"
|
|
)}
|
|
onLoad={() => setLoading(false)}
|
|
onError={() => setError(true)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|