import { Badge, Flex } from '@chakra-ui/react'; import { isNumber, isString } from 'lodash-es'; import { useMemo } from 'react'; import { ImageDTO } from 'services/api'; type ImageMetadataOverlayProps = { image: ImageDTO; }; const ImageMetadataOverlay = ({ image }: ImageMetadataOverlayProps) => { const dimensions = useMemo(() => { if (!isNumber(image.metadata?.width) || isNumber(!image.metadata?.height)) { return; } return `${image.metadata?.width} × ${image.metadata?.height}`; }, [image.metadata]); const model = useMemo(() => { if (!isString(image.metadata?.model)) { return; } return image.metadata?.model; }, [image.metadata]); return ( {dimensions && ( {dimensions} )} {model && ( {model} )} ); }; export default ImageMetadataOverlay;