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 84 85 86 87 | 2x 2x 2x 2x 14x 15x 14x 16x 16x 16x 16x 15x 1x 14x 14x 14x 14x | import { alpha, Box, LinearProgress, Skeleton, styled } from "@mui/material";
import { useTranslation } from "i18n";
import { GLOBAL } from "i18n/namespaces";
import useDonationStats from "./useDonationStats";
const StyledLinearProgress = styled(LinearProgress)(({ theme }) => ({
height: 14,
borderRadius: 7,
flexGrow: 1,
backgroundColor: alpha(theme.palette.secondary.main, 0.15),
"& .MuiLinearProgress-bar": {
borderRadius: 7,
background: `linear-gradient(90deg, ${theme.palette.secondary.main} 0%, ${theme.palette.secondary.light} 100%)`,
},
}));
const ProgressRow = styled("div")(({ theme }) => ({
display: "flex",
alignItems: "center",
gap: theme.spacing(1.5),
width: "100%",
}));
const ProgressLabel = styled("span")(({ theme }) => ({
fontSize: "0.875rem",
fontWeight: 600,
color: theme.palette.secondary.main,
whiteSpace: "nowrap",
}));
export default function DonationProgressBar() {
const { t, i18n } = useTranslation(GLOBAL);
const { data: donationStats, isLoading } = useDonationStats();
if (isLoading) {
return (
<ProgressRow>
<Box sx={{ flexGrow: 1, minWidth: 0 }}>
<Skeleton
variant="rounded"
height={14}
sx={{ borderRadius: "7px" }}
/>
</Box>
<Skeleton variant="text" width={100} />
</ProgressRow>
);
}
if (!donationStats) {
return null;
}
const progress = Math.min(
(donationStats.totalDonatedYtd / donationStats.goal) * 100,
100,
);
const currencyFormatter = new Intl.NumberFormat(i18n.language, {
style: "currency",
currency: "USD",
minimumFractionDigits: 0,
maximumFractionDigits: 0,
});
const formattedRaised = currencyFormatter.format(
donationStats.totalDonatedYtd,
);
const formattedGoal = currencyFormatter.format(donationStats.goal);
return (
<ProgressRow>
<Box sx={{ flexGrow: 1, minWidth: 0 }}>
<StyledLinearProgress
variant="determinate"
value={progress}
aria-label={t("donation_banner.progress_label")}
/>
</Box>
<ProgressLabel>
{formattedRaised} / {formattedGoal}
</ProgressLabel>
</ProgressRow>
);
}
|