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 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | import { Text } from "@common/Text";
import { Box, styled } from "@mui/material";
import { palette } from "@palette";
import { useDashboardContext } from "../Provider/DashboardContext";
import { Skeleton } from "@mui/material";
import FadeUpWrapper from "@components/animation/FadeUpWrapper";
function LabelCards() {
const { data, isLoading } = useDashboardContext();
return (
<Box width="100%">
{isLoading ? (
<>
<Skeleton
variant="rectangular"
height="15px"
width="234px"
sx={{ borderRadius: "100px" }}
/>
<StyledBox mt="16px" gap="12px" maxWidth="100%">
{Array(4)
.fill(null)
.map((c, idx) => (
<Skeleton
key={idx}
variant="rectangular"
height="67px"
sx={{ borderRadius: "12px", flex: 1, minWidth: "186px" }}
/>
))}
</StyledBox>
</>
) : (
<>
<Text
color={palette.neutral[80]}
lineHeight="45px"
fontWeight="book"
fontSize="38px"
mb="20px"
>
Dashboard
</Text>
<StyledBox gap="12px" maxWidth="100%">
{data?.customers?.cards?.map(({ label, value, isAmount }, idx) => (
<FadeUpWrapper delay={50 + idx * 50} key={idx + label + value}>
<Box
sx={{
flex: 1,
minWidth: "186px",
p: "12px",
border: `1px solid ${palette.neutral[10]}`,
borderRadius: "8px",
}}
display="flex"
justifyContent="left"
alignItems="center"
>
<div>
<Text
color={palette.neutral[70]}
lineHeight="16px"
fontSize="14px"
fontWeight="book"
mb="4px"
sx={{
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
{label}
</Text>
<Text
fontSize={18}
fontWeight="book"
color={palette.neutral[100]}
>
{value} {isAmount && <span> USD</span>}
</Text>
</div>
</Box>
</FadeUpWrapper>
))}
</StyledBox>
</>
)}
</Box>
);
}
export default LabelCards;
const StyledBox = styled(Box)({
display: "flex",
overflowX: "auto",
overflowY: "hidden",
flexDirection: "row",
"&::-webkit-scrollbar": {
display: "none",
},
msOverflowStyle: "none",
scrollbarWidth: "none",
});
|