Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 52x 52x 160x 16x 160x | import { Skeleton, Stack, SxProps } from "@mui/material";
export const DEFAULT_SPACING_OFFSET = 20 / 8;
// Generator component to generate basic skeletons (vertical or horizontal - in the future)
const BasicSkeletonGenerator = ({
howMany,
height = 200,
variant = "rectangular",
sx,
}: {
howMany: number;
height?: number;
variant?: "text" | "rectangular" | "rounded" | "circular";
sx?: SxProps;
}) => {
const arr = Array.from({ length: howMany }, (_, i) => i);
return (
<Stack data-testid="give-skeleton" gap={DEFAULT_SPACING_OFFSET}>
{arr.map((n) => {
return (
<Skeleton
key={n}
variant={variant}
height={height}
width="100%"
sx={{ borderRadius: "20px", ...sx }}
/>
);
})}
</Stack>
);
};
export { BasicSkeletonGenerator };
|