Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 4x 4x 3x 3x 3x 3x | import React from "react";
import { Grid } from "@mui/material";
import { styled } from "@mui/material";
import LinearProgress, {
linearProgressClasses,
} from "@mui/material/LinearProgress";
import { progressPercentageValue } from "@utils/index";
import { Text } from "@common/Text";
import OpenEndedInterval from "@components/Customers/Table/OpenEndedInterval";
import { palette } from "@palette";
import { useTheme } from "@mui/material";
import { useMediaQuery } from "@mui/material";
const Progress = styled(LinearProgress)(({ theme }) => ({
width: 120,
height: "8px",
borderRadius: "32px",
[`&.${linearProgressClasses.colorPrimary}`]: {
backgroundColor: palette.neutral[20],
},
[`& .${linearProgressClasses.bar}`]: {
borderRadius: "32px",
backgroundColor: palette.neutral[100],
},
}));
interface Props {
recurringMax: number | null;
recurringCount: number;
recurringInterval: string;
wrapperStyle?: any;
}
export const RecurringComponent_V2 = ({
recurringMax,
recurringCount,
recurringInterval,
wrapperStyle = {},
}: Props) => {
const progressValue = recurringMax
? progressPercentageValue(recurringCount, recurringMax)
: 0;
const theme = useTheme();
const t = useMediaQuery(theme.breakpoints.down("md"));
return (
<Grid
container
alignItems="center"
flexDirection={t ? "column" : "row"}
style={wrapperStyle}
>
<Grid
item
xs={6}
xl={recurringInterval === "once" ? 12 : 3}
paddingRight={2}
>
<Text textTransform="capitalize">
{recurringInterval === "once" ? "One Time" : recurringInterval}
</Text>
</Grid>
{recurringMax === null && recurringInterval !== "once" && (
<OpenEndedInterval />
)}
{recurringInterval !== "once" && recurringMax !== null && (
<>
<Grid item xs={12} xl={6}>
<Progress variant="determinate" value={progressValue} />
</Grid>
<Grid item xs={12} xl={3}>
<Text>
{recurringCount} out of {recurringMax}
</Text>
</Grid>
</>
)}
</Grid>
);
};
|