Tiny File Manager

Back Back Up Advanced Editor

/**
 *  External Dependencies
 */
import { Box, Flex, Skeleton, SkeletonText, VStack } from "@chakra-ui/react";
import React from "react";
import { Col, Row } from "react-grid-system";

const AddonsSkeleton = () => {
	return (
		<Row>
			{Array(12)
				.fill(1)
				.map((_, i) => (
					<Col
						style={{ marginBottom: 30 }}
						md={3}
						key={Date.now() + Math.random()}
					>
						<Box
							borderColor="gray.100"
							rounded="sm"
							bg="white"
							mb="30px"
							shadow="sm"
							minH="xs"
						>
							<VStack direction="row" gap={2}>
								<Skeleton h="10rem" width={"100%"} />

<Box px={5} py={6} width={"100%"}>
									<VStack direction={"row"} gap={5}>
										<Flex
											gap={2}
											justifyContent={"space-evenly"}
											alignItems={"center"}
											width={"100%"}
										>
											<Skeleton
												width={"1rem"}
												height={"1rem"}
											/>
											<SkeletonText
												width={"100%"}
												noOfLines={2}
											/>
											<Skeleton
												width={"2rem"}
												height={"1rem"}
											/>
										</Flex>
										<Skeleton h="2rem" width={"100%"} />
										<SkeletonText
											width={"100%"}
											noOfLines={3}
										/>
									</VStack>
								</Box>
							</VStack>
						</Box>
					</Col>
				))}
		</Row>
	);
};

export default AddonsSkeleton;