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 | import React from "react";
import { palette } from "@palette";
// mui
import { Grid, styled } from "@mui/material";
// components
import { StatsTitle, Stat } from "@common/NewStats";
import { Text } from "@common/Text";
import { StatProps } from "@common/NewStats/Stat";
import { StatsTitleProps } from "@common/NewStats/StatsTitle";
import MobileStatCard from "@common/StatCard/MobileStatCard";
import { isMobile } from "@utils/index";
export type StatCardProps = {
title: string;
mainStat: StatsTitleProps;
stats: StatProps[];
actions: React.ReactNode;
fontSize?: string | number;
};
const StatCard = (props: StatCardProps) => {
const { title, mainStat, stats, actions } = props;
if (!isMobile)
return (
<StyledRoot container gap={6}>
<StyledContainer container sx={{ alignItems: "start" }}>
<Grid item>
<StyledTitle>{title}</StyledTitle>
</Grid>
<Grid item>
<StatsTitle
isAmount={mainStat.isAmount}
title={mainStat.title}
value={mainStat.value}
isMainTitle
/>
</Grid>
</StyledContainer>
<StyledContainer container>
<StyledStatsContainer item>
{stats.map(({ isAmount, title, value, percent }, index) => (
<Stat
key={index}
isAmount={isAmount}
title={
title
? title?.toString().charAt(0).toUpperCase() +
title?.toString().slice(1)
: ""
}
value={value}
percent={percent}
/>
))}
</StyledStatsContainer>
<StyledActionsContainer item>{actions}</StyledActionsContainer>
</StyledContainer>
</StyledRoot>
);
return <MobileStatCard {...props} />;
};
const StyledContainer = styled(Grid)(() => ({
gap: "16px",
display: "flex",
justifyContent: "space-between",
}));
const StyledRoot = styled(Grid)(() => ({
gap: "12px",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
marginBottom: "56px",
}));
const StyledActionsContainer = styled(Grid)(() => ({
display: "flex",
alignItems: "center",
}));
const StyledStatsContainer = styled(Grid)(() => ({
gap: "32px",
display: "flex",
}));
const StyledTitle = styled(Text)(() => ({
fontSize: "70px",
fontWeight: 350,
lineHeight: "100%",
color: "#575353",
}));
export default StatCard;
|