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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 277x 3228x 277x 277x 3x 12x | import { Skeleton as MuiSkeleton, SkeletonProps, Stack } from "@mui/material";
import React from "react";
type Props = {
borderRadius?: number | string;
} & SkeletonProps;
const Skeleton = React.forwardRef<HTMLDivElement, Props>(
({ sx, borderRadius = "40px", ...props }, ref) => {
return (
<MuiSkeleton
ref={ref}
sx={{
borderRadius,
...sx,
}}
variant="rounded"
{...props}
/>
);
},
);
Skeleton.displayName = "Skeleton";
type DoubledSkeletonProps = {
spacing?: number;
direction?: "row" | "column";
frequency?: number;
} & Props;
export const DoubledSkeleton = ({
sx,
spacing,
direction,
borderRadius,
frequency,
...props
}: DoubledSkeletonProps) => (
<Stack spacing={spacing || 1} direction={direction || "column"}>
{Array(frequency || 2)
.fill(0)
.map((_, index) => (
<MuiSkeleton
key={index}
sx={{
borderRadius: borderRadius || "40px",
...(sx && sx),
}}
variant="rounded"
{...props}
/>
))}
</Stack>
);
export default Skeleton;
|