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 | 15x 48x 48x 48x 48x 48x | import { CURRENCY } from "@constants/constants";
import { Stack, SxProps } from "@mui/material";
import GiveProgressBar from "@shared/ProgressBar/GiveProgressBar";
import GiveText from "@shared/Text/GiveText";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { parseAmount } from "@utils/index";
type Props = {
totalContribution: string | number;
donationTarget: string | number;
customColor?: string;
percentage: number;
containerSx?: SxProps;
};
const ProgressBarWithAmount = ({
totalContribution,
donationTarget,
customColor,
percentage,
containerSx,
}: Props) => {
const { isMobileView } = useCustomThemeV2();
//on the checkout page is a string wich we parse with "," and can be NAN
const parsedTotal =
typeof totalContribution === "string"
? totalContribution.replace(/,/g, "")
: totalContribution;
const parsedTarget =
typeof donationTarget === "string"
? donationTarget.replace(/,/g, "")
: donationTarget;
const isRaised = Number(parsedTotal) >= Number(parsedTarget);
return (
<Stack spacing={1} sx={containerSx}>
<Stack
gap="8px"
display="flex"
flexDirection={isMobileView ? "column" : "row"}
alignItems={isMobileView ? "flex-start" : "flex-end"}
>
<GiveText
fontSize="36px"
color="primary"
lineHeight="40px"
fontWeight={300}
>
{parseAmount(totalContribution)} {CURRENCY}
</GiveText>
<GiveText variant="bodyM" color="primary">
{isRaised
? "Raised!"
: `Raised of ${parseAmount(donationTarget)} goal`}
</GiveText>
</Stack>
<GiveProgressBar
showDot={false}
customColor={customColor}
type="default"
value={percentage}
variant="custom"
/>
</Stack>
);
};
export default ProgressBarWithAmount;
|