CreateFormCTA.tsx
2 months ago
CreateWithAI.tsx
5 days ago
Main.tsx
2 months ago
PluginStatus.tsx
2 months ago
Sidebar.tsx
2 months ago
TemplateList.tsx
5 days ago
TemplatesSkeleton.tsx
5 months ago
TemplatesSkeleton.tsx
41 lines
| 1 | import { |
| 2 | Box, |
| 3 | SimpleGrid, |
| 4 | Skeleton, |
| 5 | SkeletonText, |
| 6 | VStack, |
| 7 | } from '@chakra-ui/react'; |
| 8 | |
| 9 | const TemplatesSkeleton = () => { |
| 10 | return ( |
| 11 | <Box> |
| 12 | <Skeleton height="40px" width="200px" mb="32px" /> |
| 13 | |
| 14 | <SimpleGrid columns={{ base: 1, md: 2, lg: 3, xl: 4 }} spacing={6}> |
| 15 | {Array(8) |
| 16 | .fill(1) |
| 17 | .map((_, i) => ( |
| 18 | <Box |
| 19 | key={i} |
| 20 | borderWidth="2px" |
| 21 | borderRadius="8px" |
| 22 | borderColor="#F6F4FA" |
| 23 | overflow="hidden" |
| 24 | bg="white" |
| 25 | p={0} |
| 26 | > |
| 27 | <Skeleton height="250px" width="100%" /> |
| 28 | |
| 29 | <VStack padding="16px" align="start" spacing={2}> |
| 30 | <Skeleton height="20px" width="80%" /> |
| 31 | <SkeletonText noOfLines={2} spacing={2} width="100%" /> |
| 32 | </VStack> |
| 33 | </Box> |
| 34 | ))} |
| 35 | </SimpleGrid> |
| 36 | </Box> |
| 37 | ); |
| 38 | }; |
| 39 | |
| 40 | export default TemplatesSkeleton; |
| 41 |