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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | 129x 55x 6x 287x 6x 6x 82x 6x 41x 123x 82x 6x | import { Text } from "@common/Text";
import { Skeleton, Stack, Divider, styled } from "@mui/material";
const DividerText = styled(Text)(({ theme }) => ({
color: theme.palette.neutral["70"],
fontSize: "18px",
fontWeight: 350,
lineHeight: "21.6px",
letterSpacing: "-0.18px",
}));
const SubTitle = styled(Text)(({ theme }) => ({
color: theme.palette.neutral["70"],
fontWeight: 350,
lineHeight: "16.8px",
}));
type TSize = string | number;
const CommonSkeleton = ({
height,
width,
}: {
height?: TSize;
width?: TSize;
}) => <Skeleton height={height} width={width} sx={{ borderRadius: "8px" }} />;
const GiveCommonSkeleton = ({
height,
width,
}: {
height?: TSize;
width?: TSize;
}) => <Skeleton height={height} width={width} sx={{ borderRadius: "16px" }} />;
const SecondarySkeleton = () => (
<>
<Divider />
<Stack direction="column" gap="8px" alignItems="stretch">
<CommonSkeleton height={32} />
<CommonSkeleton height={72} />
</Stack>
</>
);
const LoadingSkeleton = () => {
return (
<Stack direction="column" gap="32px" alignItems="stretch">
<Skeleton
variant="circular"
width={94}
height={94}
sx={{ alignSelf: "center" }}
/>
<Stack direction="column" gap="8px" alignItems="stretch">
{Array.from({ length: 3 }, (_, i) => (
<CommonSkeleton key={i} height={32} />
))}
</Stack>
{Array.from({ length: 2 }, (_, i) => (
<SecondarySkeleton key={i} />
))}
</Stack>
);
};
const GiveLoadingSkeleton = () => {
return (
<Stack direction="column" gap={4}>
<Stack direction="row" justifyContent="space-between" alignItems="center">
<Stack direction="column" gap={2} width="75%">
<GiveCommonSkeleton height={42} width={306} />
<Stack direction="row" gap={2}>
<GiveCommonSkeleton height={42} width={84} />
{[...Array(2)].map((_, index) => (
<GiveCommonSkeleton key={index} height={42} width={84} />
))}
</Stack>
</Stack>
<Skeleton variant="circular" width={72} height={72} />
</Stack>
<GiveCommonSkeleton height={42} width={306} />
<Skeleton
sx={{ borderRadius: "20px" }}
variant="rectangular"
height={270}
/>
</Stack>
);
};
export { DividerText, SubTitle, LoadingSkeleton, GiveLoadingSkeleton };
|