108 lines
2.6 KiB
TypeScript
108 lines
2.6 KiB
TypeScript
import { useState } from "react";
|
||
import {
|
||
Box,
|
||
Paper,
|
||
Typography,
|
||
LinearProgress,
|
||
useTheme,
|
||
} from "@mui/material";
|
||
|
||
type ResultProps = {
|
||
title: string;
|
||
percent: number;
|
||
highlight?: boolean;
|
||
};
|
||
|
||
const RESULTS_MOCK: Record<string, number> = {
|
||
"Заголовок результата": 100,
|
||
"Результат пропущен": 7,
|
||
Другое: 27,
|
||
};
|
||
|
||
const Result = ({ title, percent, highlight }: ResultProps) => {
|
||
const theme = useTheme();
|
||
|
||
return (
|
||
<Box sx={{ padding: "15px 25px" }}>
|
||
<Box
|
||
sx={{
|
||
position: "relative",
|
||
display: "flex",
|
||
gap: "15px",
|
||
alignItems: "center",
|
||
flexGrow: 1,
|
||
}}
|
||
>
|
||
<LinearProgress
|
||
variant="determinate"
|
||
title={title}
|
||
value={percent}
|
||
sx={{
|
||
width: "100%",
|
||
height: "44px",
|
||
background: theme.palette.background.default,
|
||
borderRadius: "10px",
|
||
border: `1px solid ${highlight ? "#FC7230" : theme.palette.grey2.main}`,
|
||
"& > span": { background: highlight ? "#FDE9E0" : "#9A9AAF1A" },
|
||
"&::before": {
|
||
content: `"${title}"`,
|
||
position: "absolute",
|
||
zIndex: 1,
|
||
left: "20px",
|
||
top: "50%",
|
||
transform: "translateY(-50%)",
|
||
color: highlight ? "#FC7230" : theme.palette.grey3.main,
|
||
},
|
||
}}
|
||
/>
|
||
<Box sx={{ minWidth: 35 }}>
|
||
<Typography
|
||
sx={{
|
||
minWidth: "45px",
|
||
fontWeight: highlight ? "bold" : "normal",
|
||
color: highlight ? "#FC7230" : theme.palette.text.primary,
|
||
}}
|
||
>{`${percent}%`}</Typography>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export const Results = () => {
|
||
const [results, setResults] = useState<Record<string, number>>(RESULTS_MOCK);
|
||
const theme = useTheme();
|
||
|
||
return (
|
||
<Box>
|
||
<Typography
|
||
component="h3"
|
||
sx={{
|
||
marginTop: "100px",
|
||
fontSize: "24px",
|
||
fontWeight: "bold",
|
||
color: theme.palette.text.primary,
|
||
}}
|
||
>
|
||
Статистика по результатам
|
||
</Typography>
|
||
<Paper
|
||
sx={{
|
||
borderRadius: "12px",
|
||
boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
|
||
marginTop: "30px",
|
||
}}
|
||
>
|
||
{Object.entries(results).map(([title, percent], index) => (
|
||
<Result
|
||
key={title}
|
||
title={title}
|
||
percent={percent}
|
||
highlight={!index}
|
||
/>
|
||
))}
|
||
</Paper>
|
||
</Box>
|
||
);
|
||
};
|