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 | 4x 4x 3x 3x | import OpenEndedInterval from "@components/Customers/Table/OpenEndedInterval";
import { progressPercentageValue } from "@utils/index";
import React from "react";
import { Text } from "@common/Text";
import { Stack, styled } from "@mui/material";
import LinearProgress, {
linearProgressClasses,
} from "@mui/material/LinearProgress";
import Box from "@mui/material/Box";
import { palette } from "@palette";
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;
}
export const RecurringComponent = ({
recurringMax,
recurringCount,
recurringInterval,
}: Props) => {
const progressValue = recurringMax
? progressPercentageValue(recurringCount, recurringMax)
: 0;
return (
<Stack gap={1.5} direction="row" alignItems="center">
<Text textTransform="capitalize">
{recurringInterval === "once" ? "One Time" : recurringInterval}
</Text>
{recurringMax === null && recurringInterval !== "once" && (
<OpenEndedInterval />
)}
{recurringInterval !== "once" && recurringMax !== null && (
<>
<Box>
<Progress variant="determinate" value={progressValue} />
</Box>
<Text>
{recurringCount} out of {recurringMax}
</Text>
</>
)}
</Stack>
);
};
|