refactored ProgressCard to component

src/components/ProgressCard/ProgressCard.view.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import {
+  Box,
+  Typography,
+  Paper,
+  LinearProgress,
+  linearProgressClasses
+} from "@mui/material";
+import { ProgressCardProps } from "./ProgressCard.models";
+
+interface ViewProps extends ProgressCardProps {
+  percentage: number;
+  prefixAmount: string;
+  suffixString: string;
+}
+
+export default function ProgressCardView({
+  header,
+  colorTheme = "info",
+  percentage,
+  prefixAmount,
+  suffixString,
+}: ViewProps) {
+  return (
+    <Paper
+      elevation={4}
+      sx={{
+        width: "100%",
+        p: { xs: 3, md: 4 },
+        borderRadius: 4,
+        background: (theme) =>
+          colorTheme === "info"
+            ? "linear-gradient(135deg, #0284c7 0%, #06b6d4 100%)"
+            : `linear-gradient(135deg, ${theme.palette[colorTheme].main} 0%, ${theme.palette[colorTheme].light} 100%)`,
+        color: "#fff",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        position: "relative",
+        overflow: "hidden",
+        boxShadow: (theme) =>
+          `0 12px 24px -10px ${
+            theme.palette.mode === "dark"
+              ? "#000"
+              : theme.palette[colorTheme].main
+          }`,
+      }}
+    >
+      <Typography variant="subtitle1" fontWeight={600} sx={{ opacity: 0.9, mb: 1 }}>
+        {header}
+      </Typography>
+
+      <Typography variant="h3" fontWeight={800} sx={{ mb: 3 }}>
+        {prefixAmount}{" "}
+        {suffixString && (
+          <Typography
+            component="span"
+            variant="subtitle1"
+            sx={{ opacity: 0.7, fontWeight: 500 }}
+          >
+            {suffixString}
+          </Typography>
+        )}
+      </Typography>
+
+      <Box sx={{ width: "85%" }}>
+        <LinearProgress
+          variant="determinate"
+          value={percentage}
+          sx={{
+            height: 10,
+            borderRadius: 5,
+            [`&.${linearProgressClasses.colorPrimary}`]: {
+              backgroundColor: "rgba(0, 0, 0, 0.2)",
+            },
+            [`& .${linearProgressClasses.bar}`]: {
+              borderRadius: 5,
+              backgroundColor: "#fff",
+            },
+          }}
+        />
+      </Box>
+    </Paper>
+  );
+}