mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.3 KiB
58 lines
1.3 KiB
import React from 'react';
|
|
import { Box, BoxProps, Grid, space } from '@blockstack/ui';
|
|
import { transition } from '@common/utils';
|
|
import { Img } from '@components/mdx/image';
|
|
|
|
const Image = ({
|
|
src,
|
|
isHovered,
|
|
size,
|
|
...rest
|
|
}: BoxProps & { src?: string; isHovered?: boolean }) => (
|
|
<Box
|
|
flexShrink={0}
|
|
style={{
|
|
willChange: 'transform',
|
|
}}
|
|
width="100%"
|
|
size={size}
|
|
{...rest}
|
|
>
|
|
<Img
|
|
flexShrink={0}
|
|
borderRadius="12px"
|
|
src={src}
|
|
width="100%"
|
|
minWidth={size}
|
|
size={size}
|
|
mx="0 !important"
|
|
my="0 !important"
|
|
/>
|
|
</Box>
|
|
);
|
|
export const HoverImage: React.FC<BoxProps & { isHovered?: boolean; src?: string }> = React.memo(
|
|
({ isHovered, src, ...props }) => (
|
|
<Box
|
|
bg="#9985FF"
|
|
position="relative"
|
|
borderRadius="12px"
|
|
mb={space('loose')}
|
|
overflow="hidden"
|
|
{...props}
|
|
>
|
|
<Grid style={{ placeItems: 'center' }} height="0px" paddingTop="56.25%">
|
|
<Image
|
|
width="102%"
|
|
size="102%"
|
|
transition={transition('0.45s')}
|
|
transform={isHovered && 'scale(1.08)'}
|
|
style={{ willChange: 'transform' }}
|
|
src={src}
|
|
position="absolute"
|
|
left={'-2%'}
|
|
top={'-2%'}
|
|
/>
|
|
</Grid>
|
|
</Box>
|
|
)
|
|
);
|
|
|