Files
contentstack-imagevault/remix/app/components/FullSizeImage.tsx
2024-03-26 13:03:24 +01:00

42 lines
807 B
TypeScript

import { ModalBody, ModalHeader } from "@contentstack/venus-components"
export default function FullSizeImage({
title,
onClose,
imageUrl,
alt,
aspectRatio,
}: {
title: string
onClose: () => void
imageUrl: string
alt: string
aspectRatio: number
}) {
return (
<>
<ModalHeader title={title} closeModal={onClose} />
<ModalBody
id="fullsize-image"
style={{
maxHeight: "inherit",
borderRadius: "50px",
display: "flex",
justifyContent: "center",
}}
>
<img
src={imageUrl}
style={{
aspectRatio,
maxWidth: "100%",
maxHeight: "100%",
objectFit: "contain",
}}
alt={alt}
/>
</ModalBody>
</>
)
}