blob: 1e0ca6a39625b28bc7de4dd43a39796f8a022ab4 (
plain)
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
|
import { Box, HStack, Skeleton, SkeletonText, VStack, useBreakpointValue } from '@chakra-ui/react'
const ProductCardSkeleton = () => {
const wrapperHeight = useBreakpointValue({ base: '300px', md: '350px' })
return (
<Box
role='status'
w='100%'
bgColor='white'
h={wrapperHeight}
borderWidth='1px'
borderRadius='md'
>
<Skeleton height='50%' {...skeletonColors} />
<VStack padding='10px 12px 16px 12px' height='50%'>
<Box w='full'>
<Skeleton height='12px' w='30%' {...skeletonColors} />
<SkeletonText
noOfLines={2}
spacing='8px'
skeletonHeight='12px'
mt='12px'
{...skeletonColors}
/>
</Box>
<VStack spacing='12px' alignItems='flex-start' mt='20px' w='full'>
<HStack spacing='8px' w='full'>
<Skeleton height='12px' w='60%' {...skeletonColors} />
<Skeleton height='12px' w='10%' {...skeletonColors} />
</HStack>
<Skeleton height='12px' w='50%' {...skeletonColors} />
</VStack>
</VStack>
<span className='sr-only'>Loading...</span>
</Box>
)
}
const skeletonColors = {
startColor: 'gray.200',
endColor: 'gray.400'
}
export default ProductCardSkeleton
|
