41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog'
|
|
import { useTranslation } from '@/i18n/react-i18next-compat'
|
|
|
|
interface ImageModalProps {
|
|
image: { url: string; alt: string } | null
|
|
onClose: () => void
|
|
}
|
|
|
|
const ImageModal = ({ image, onClose }: ImageModalProps) => {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<Dialog open={!!image} onOpenChange={(open) => !open && onClose()}>
|
|
<DialogContent className="max-w-4xl max-h-[90vh] p-0">
|
|
<DialogHeader className="p-6 pb-2">
|
|
<DialogTitle>{image?.alt || t('common:image')}</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="flex justify-center items-center p-6 pt-2">
|
|
{image && (
|
|
<img
|
|
src={image.url}
|
|
alt={image.alt}
|
|
className="max-w-full max-h-[70vh] object-contain rounded-md"
|
|
onError={(e) => {
|
|
e.currentTarget.style.display = 'none'
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|
|
|
|
export default ImageModal
|