mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
31 lines
688 B
TypeScript
31 lines
688 B
TypeScript
import { Badge, Flex } from '@chakra-ui/react';
|
||
import { memo } from 'react';
|
||
import { ImageDTO } from 'services/api/types';
|
||
|
||
type ImageMetadataOverlayProps = {
|
||
imageDTO: ImageDTO;
|
||
};
|
||
|
||
const ImageMetadataOverlay = ({ imageDTO }: ImageMetadataOverlayProps) => {
|
||
return (
|
||
<Flex
|
||
sx={{
|
||
pointerEvents: 'none',
|
||
flexDirection: 'column',
|
||
position: 'absolute',
|
||
top: 0,
|
||
insetInlineStart: 0,
|
||
p: 2,
|
||
alignItems: 'flex-start',
|
||
gap: 2,
|
||
}}
|
||
>
|
||
<Badge variant="solid" colorScheme="base">
|
||
{imageDTO.width} × {imageDTO.height}
|
||
</Badge>
|
||
</Flex>
|
||
);
|
||
};
|
||
|
||
export default memo(ImageMetadataOverlay);
|