58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import Stack from "@mui/material/Stack";
|
|
import Typography from "@mui/material/Typography";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import { useMediaQuery } from "@mui/material";
|
|
import type { PaletteKey } from "@/Utils/Theme/v2/theme";
|
|
import { BaseBox } from "@/Components/v2/DesignElements";
|
|
|
|
type GradientBox = React.PropsWithChildren<{ palette?: PaletteKey }>;
|
|
|
|
export const GradientBox: React.FC<GradientBox> = ({ children, palette }) => {
|
|
const theme = useTheme();
|
|
const isSmall = useMediaQuery(theme.breakpoints.down("md"));
|
|
const bg = palette
|
|
? `linear-gradient(to bottom right, ${theme.palette[palette].main} 30%, ${theme.palette[palette].lowContrast} 70%)`
|
|
: `linear-gradient(340deg, ${theme.palette.tertiary.main} 10%, ${theme.palette.primary.main} 45%)`;
|
|
|
|
return (
|
|
<BaseBox
|
|
sx={{
|
|
padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
|
|
width: isSmall
|
|
? `calc(50% - (1 * ${theme.spacing(8)} / 2))`
|
|
: `calc(25% - (3 * ${theme.spacing(8)} / 4))`,
|
|
|
|
background: bg,
|
|
}}
|
|
>
|
|
{children}
|
|
</BaseBox>
|
|
);
|
|
};
|
|
|
|
type StatBoxProps = React.PropsWithChildren<{
|
|
title: string;
|
|
subtitle: string;
|
|
palette?: PaletteKey;
|
|
}>;
|
|
|
|
export const StatBox: React.FC<StatBoxProps> = ({
|
|
title,
|
|
subtitle,
|
|
palette,
|
|
children,
|
|
}) => {
|
|
const theme = useTheme();
|
|
const textColor = palette ? theme.palette[palette].contrastText : "inherit";
|
|
|
|
return (
|
|
<GradientBox palette={palette}>
|
|
<Stack>
|
|
<Typography color={textColor}>{title}</Typography>
|
|
<Typography color={textColor}>{subtitle}</Typography>
|
|
{children}
|
|
</Stack>
|
|
</GradientBox>
|
|
);
|
|
};
|