File size: 1,614 Bytes
8a37e0a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
import { Flex, Icon, Image, Tooltip } from '@invoke-ai/ui-library';
import { typedMemo } from 'common/util/typedMemo';
import { PiImage } from 'react-icons/pi';
const IMAGE_THUMBNAIL_SIZE = '40px';
const FALLBACK_ICON_SIZE = '24px';
const StylePresetImage = ({ presetImageUrl, imageWidth }: { presetImageUrl: string | null; imageWidth?: number }) => {
return (
<Tooltip
closeOnScroll
label={
presetImageUrl && (
<Image
src={presetImageUrl}
draggable={false}
objectFit="cover"
maxW={150}
aspectRatio="1/1"
borderRadius="base"
borderBottomRadius="lg"
/>
)
}
p={2}
>
<Image
src={presetImageUrl || ''}
fallbackStrategy="beforeLoadOrError"
fallback={
<Flex
height={imageWidth || IMAGE_THUMBNAIL_SIZE}
minWidth={imageWidth || IMAGE_THUMBNAIL_SIZE}
bg="base.650"
borderRadius="base"
alignItems="center"
justifyContent="center"
>
<Icon color="base.500" as={PiImage} boxSize={imageWidth ? imageWidth / 2 : FALLBACK_ICON_SIZE} />
</Flex>
}
objectFit="cover"
objectPosition="50% 50%"
height={imageWidth || IMAGE_THUMBNAIL_SIZE}
width={imageWidth || IMAGE_THUMBNAIL_SIZE}
minHeight={imageWidth || IMAGE_THUMBNAIL_SIZE}
minWidth={imageWidth || IMAGE_THUMBNAIL_SIZE}
borderRadius="base"
/>
</Tooltip>
);
};
export default typedMemo(StylePresetImage);
|