99 lines
2.4 KiB
TypeScript
99 lines
2.4 KiB
TypeScript
import { CircularProgress, Box, Typography, useTheme, styled } from "@mui/material";
|
|
|
|
const StyledCircularProgress = styled(CircularProgress)(({ theme }) => ({
|
|
"& .MuiCircularProgress-circle": {
|
|
strokeLinecap: "round",
|
|
transition: "stroke-dashoffset 0.3s ease",
|
|
},
|
|
}));
|
|
|
|
export const CustomCircularTimer: React.FC<CircularTimerProps> = ({ duration, remaining }) => {
|
|
const theme = useTheme();
|
|
const progress = (remaining / duration) * 100;
|
|
|
|
return (
|
|
<Box sx={{ position: "relative", display: "inline-flex", width: 76, height: 76 }}>
|
|
{/* Серый фон */}
|
|
<Box
|
|
sx={{
|
|
border: "#9A9AAF solid 1px",
|
|
position: "absolute",
|
|
height: "72px",
|
|
width: "72px",
|
|
borderRadius: "100%",
|
|
top: "2px",
|
|
left: "2px",
|
|
}}
|
|
/>
|
|
|
|
{/* Основной прогресс */}
|
|
<StyledCircularProgress
|
|
variant="determinate"
|
|
value={progress}
|
|
size={76}
|
|
thickness={4}
|
|
sx={{
|
|
color: "linear-gradient(135deg, #FC712F 0%, #7E2AEA 100%)",
|
|
position: "absolute",
|
|
|
|
"& .MuiCircularProgress-circle": {
|
|
strokeLinecap: "round",
|
|
stroke: "url(#timer-gradient)", // ← правильное использование
|
|
},
|
|
}}
|
|
/>
|
|
|
|
<svg
|
|
width={0}
|
|
height={0}
|
|
>
|
|
<defs>
|
|
<linearGradient
|
|
id="timer-gradient"
|
|
x1="0%"
|
|
y1="0%"
|
|
x2="100%"
|
|
y2="100%"
|
|
>
|
|
<stop
|
|
offset="9.9%"
|
|
stopColor="#FC712F"
|
|
/>
|
|
<stop
|
|
offset="73.88%"
|
|
stopColor="#7E2AEA"
|
|
/>
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
|
|
{/* Центральный контент */}
|
|
<Box
|
|
sx={{
|
|
position: "absolute",
|
|
top: "50%",
|
|
left: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
width: 56,
|
|
height: 56,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="body1"
|
|
fontWeight="bold"
|
|
sx={{
|
|
fontSize: "16px",
|
|
fontWeight: 400,
|
|
color: theme.palette.text.primary,
|
|
}}
|
|
>
|
|
{remaining}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|