mirror of
https://github.com/invoke-ai/InvokeAI.git
synced 2026-02-14 18:34:55 -05: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);
|