128 lines
3.5 KiB
TypeScript
128 lines
3.5 KiB
TypeScript
import * as React from "react";
|
|
import {
|
|
Box,
|
|
Typography,
|
|
Paper,
|
|
LinearProgress,
|
|
Divider,
|
|
linearProgressClasses
|
|
} from "@mui/material";
|
|
import { useTheme, alpha } from "@mui/material/styles";
|
|
import { ProgressCardProps } from "./ProgressCard.models";
|
|
|
|
interface ViewProps extends ProgressCardProps {
|
|
percentage: number;
|
|
formattedProgress: string;
|
|
formattedTotal: string;
|
|
}
|
|
|
|
export default function ProgressCardView({
|
|
header,
|
|
colorTheme = "info",
|
|
percentage,
|
|
formattedProgress,
|
|
formattedTotal,
|
|
compact = false,
|
|
}: ViewProps) {
|
|
const theme = useTheme();
|
|
const isDark = theme.palette.mode === "dark";
|
|
|
|
return (
|
|
<Paper
|
|
elevation={compact ? 2 : 4}
|
|
sx={{
|
|
width: "100%",
|
|
p: compact ? { xs: 2.5, md: 3 } : { xs: 3, md: 4 },
|
|
borderRadius: compact ? 3 : 4,
|
|
background: (theme) => {
|
|
const baseColor = theme.palette[colorTheme]?.main || theme.palette.primary.main;
|
|
const lightColor = theme.palette[colorTheme]?.light || theme.palette.primary.light;
|
|
return isDark
|
|
? `linear-gradient(135deg, ${alpha(baseColor, 0.9)} 0%, ${alpha(baseColor, 0.3)} 100%)`
|
|
: `linear-gradient(135deg, ${baseColor} 0%, ${lightColor} 100%)`;
|
|
},
|
|
color: "#fff",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: compact ? "flex-start" : "center",
|
|
justifyContent: "center",
|
|
position: "relative",
|
|
overflow: "hidden",
|
|
border: isDark ? "1px solid rgba(255,255,255,0.1)" : "none",
|
|
boxShadow: (theme) =>
|
|
`0 ${compact ? 6 : 12}px ${compact ? 12 : 24}px -10px ${
|
|
isDark
|
|
? "rgba(0,0,0,0.5)"
|
|
: theme.palette[colorTheme]?.main || theme.palette.primary.main
|
|
}`,
|
|
}}
|
|
>
|
|
<Typography
|
|
variant={compact ? "body2" : "subtitle1"}
|
|
fontWeight={700}
|
|
sx={{
|
|
opacity: 0.95,
|
|
mb: compact ? 1.5 : 2,
|
|
width: '100%',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
letterSpacing: 0.5,
|
|
textShadow: isDark ? '0 1px 2px rgba(0,0,0,0.3)' : 'none'
|
|
}}
|
|
>
|
|
{header}
|
|
</Typography>
|
|
|
|
<Box sx={{ mb: compact ? 2 : 3, width: '100%' }}>
|
|
<Typography
|
|
variant={compact ? "h5" : "h3"}
|
|
fontWeight={900}
|
|
sx={{ mb: 0.5, lineHeight: 1.2, textShadow: isDark ? '0 2px 4px rgba(0,0,0,0.3)' : 'none' }}
|
|
>
|
|
{formattedProgress}
|
|
</Typography>
|
|
|
|
<Divider
|
|
sx={{
|
|
my: 1,
|
|
borderColor: "rgba(255,255,255,0.25)",
|
|
width: "100%",
|
|
}}
|
|
/>
|
|
|
|
<Typography
|
|
variant={compact ? "caption" : "body2"}
|
|
sx={{
|
|
opacity: 0.85,
|
|
fontWeight: 500,
|
|
display: "block",
|
|
color: "rgba(255,255,255,0.9)"
|
|
}}
|
|
>
|
|
of {formattedTotal}
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Box sx={{ width: "100%", mt: 'auto' }}>
|
|
<LinearProgress
|
|
variant="determinate"
|
|
value={percentage}
|
|
sx={{
|
|
height: compact ? 6 : 10,
|
|
borderRadius: 5,
|
|
[`&.${linearProgressClasses.colorPrimary}`]: {
|
|
backgroundColor: "rgba(0, 0, 0, 0.25)",
|
|
},
|
|
[`& .${linearProgressClasses.bar}`]: {
|
|
borderRadius: 5,
|
|
backgroundColor: "#fff",
|
|
boxShadow: '0 0 8px rgba(255,255,255,0.4)'
|
|
},
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Paper>
|
|
);
|
|
}
|