mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
29 lines
648 B
TypeScript
29 lines
648 B
TypeScript
import { Badge, Flex } from '@chakra-ui/react';
|
||
import { memo } from 'react';
|
||
import type { ImageDTO } from 'services/api/types';
|
||
|
||
type ImageMetadataOverlayProps = {
|
||
imageDTO: ImageDTO;
|
||
};
|
||
|
||
const ImageMetadataOverlay = ({ imageDTO }: ImageMetadataOverlayProps) => {
|
||
return (
|
||
<Flex
|
||
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);
|