AddonsSkeleton.js
126 lines
| 1 | /** |
| 2 | * External Dependencies |
| 3 | */ |
| 4 | import { |
| 5 | Box, |
| 6 | HStack, |
| 7 | SimpleGrid, |
| 8 | Skeleton, |
| 9 | SkeletonCircle, |
| 10 | SkeletonText, |
| 11 | Stack, |
| 12 | VStack, |
| 13 | } from '@chakra-ui/react'; |
| 14 | |
| 15 | const AddonsSkeleton = () => { |
| 16 | return ( |
| 17 | <> |
| 18 | {/* Filters Section Skeleton */} |
| 19 | <Box bg="white" borderRadius="lg" p="5" mb="4" boxShadow="sm"> |
| 20 | <Stack direction="row" justify="space-between" align="center"> |
| 21 | <HStack spacing="3"> |
| 22 | {/* Plan Select Skeleton */} |
| 23 | <Skeleton height="38px" width="140px" borderRadius="8px" /> |
| 24 | {/* Sort Select Skeleton */} |
| 25 | <Skeleton height="38px" width="140px" borderRadius="8px" /> |
| 26 | {/* Status Select Skeleton */} |
| 27 | <Skeleton height="38px" width="140px" borderRadius="8px" /> |
| 28 | </HStack> |
| 29 | |
| 30 | <HStack spacing="3"> |
| 31 | {/* Reset Button Skeleton */} |
| 32 | <Skeleton height="38px" width="38px" borderRadius="8px" /> |
| 33 | {/* Search Input Skeleton */} |
| 34 | <Skeleton height="38px" width="320px" borderRadius="8px" /> |
| 35 | </HStack> |
| 36 | </Stack> |
| 37 | </Box> |
| 38 | |
| 39 | {/* Categories Section Skeleton */} |
| 40 | <Box |
| 41 | bg="white" |
| 42 | borderRadius="lg" |
| 43 | p="4" |
| 44 | mb="4" |
| 45 | boxShadow="sm" |
| 46 | position="relative" |
| 47 | minH="56px" |
| 48 | > |
| 49 | <HStack spacing="6" py="1"> |
| 50 | {Array(6) |
| 51 | .fill(0) |
| 52 | .map((_, i) => ( |
| 53 | <Skeleton |
| 54 | key={i} |
| 55 | height="24px" |
| 56 | width={`${60 + Math.random() * 40}px`} |
| 57 | borderRadius="4px" |
| 58 | /> |
| 59 | ))} |
| 60 | </HStack> |
| 61 | </Box> |
| 62 | |
| 63 | {/* Cards Grid Skeleton */} |
| 64 | <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing="6"> |
| 65 | {Array(9) |
| 66 | .fill(0) |
| 67 | .map((_, i) => ( |
| 68 | <Box |
| 69 | key={i} |
| 70 | bg="white" |
| 71 | borderRadius="lg" |
| 72 | border="1px solid" |
| 73 | borderColor="gray.200" |
| 74 | p="6" |
| 75 | transition="all 0.2s" |
| 76 | height="100%" |
| 77 | display="flex" |
| 78 | flexDirection="column" |
| 79 | > |
| 80 | {/* Main Content Layout */} |
| 81 | <HStack align="start" spacing="4" flex="1" mb="6"> |
| 82 | {/* Icon Skeleton */} |
| 83 | <SkeletonCircle size="10" flexShrink={0} /> |
| 84 | |
| 85 | {/* Title and Badge Section */} |
| 86 | <VStack align="start" spacing="3" flex="1" w="full"> |
| 87 | <HStack justify="space-between" w="full" align="start"> |
| 88 | {/* Title Skeleton */} |
| 89 | <Skeleton height="20px" width="60%" /> |
| 90 | {/* Badge Skeleton */} |
| 91 | <Skeleton height="20px" width="45px" borderRadius="4px" /> |
| 92 | </HStack> |
| 93 | |
| 94 | {/* Description Skeleton */} |
| 95 | <SkeletonText noOfLines={2} spacing="2" width="100%" /> |
| 96 | </VStack> |
| 97 | </HStack> |
| 98 | |
| 99 | {/* Footer Section */} |
| 100 | <HStack |
| 101 | justify="space-between" |
| 102 | align="center" |
| 103 | mt="auto" |
| 104 | pt="3" |
| 105 | borderTop="1px solid" |
| 106 | borderColor="gray.100" |
| 107 | > |
| 108 | <HStack spacing="2"> |
| 109 | {/* Docs Link Skeleton */} |
| 110 | <Skeleton height="16px" width="40px" /> |
| 111 | <Skeleton height="16px" width="4px" /> |
| 112 | {/* Video Button Skeleton */} |
| 113 | <Skeleton height="20px" width="20px" borderRadius="4px" /> |
| 114 | </HStack> |
| 115 | {/* Toggle/Button Skeleton */} |
| 116 | <Skeleton height="24px" width="44px" borderRadius="full" /> |
| 117 | </HStack> |
| 118 | </Box> |
| 119 | ))} |
| 120 | </SimpleGrid> |
| 121 | </> |
| 122 | ); |
| 123 | }; |
| 124 | |
| 125 | export default AddonsSkeleton; |
| 126 |