24 lines
No EOL
1,002 B
JavaScript
24 lines
No EOL
1,002 B
JavaScript
import React from 'react'
|
|
import { Box, Typography, useTheme } from "@mui/material";
|
|
import FlexBetween from "./FlexBetween";
|
|
|
|
|
|
const StatBox = ({ title, value, increase, icon, description }) => {
|
|
const theme = useTheme();
|
|
|
|
|
|
return (
|
|
<Box gridColumn="span 2" gridRow="span 1" display="flex" flexDirection="column" justifyContent="space-between" p="1.25rem 1rem" flex="1 1 100%" backgroundColor={theme.palette.background.alt} borderRadius="0.55rem">
|
|
<FlexBetween>
|
|
<Typography variant="h6" sx={{ color: theme.palette.secondary[100] }}>{title}</Typography>{icon}
|
|
</FlexBetween>
|
|
<Typography variant="h3" fontWeight="600" sx={{ color: theme.palette.secondary[200] }}>{value}</Typography>
|
|
<FlexBetween gap="1rem">
|
|
<Typography variant="h5" fontStyle="italic" sx={{ color: theme.palette.secondary.light }}>{increase}</Typography>
|
|
<Typography>{description}</Typography>
|
|
</FlexBetween>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default StatBox |