47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import { Progress } from "@/components/ui/progress";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface CapacityProgressBarProps {
|
|
nbInscrits: number;
|
|
capaciteMax: number;
|
|
}
|
|
|
|
export default function CapacityProgressBar({
|
|
nbInscrits,
|
|
capaciteMax,
|
|
}: CapacityProgressBarProps) {
|
|
const percentage = capaciteMax > 0 ? Math.round((nbInscrits / capaciteMax) * 100) : 0;
|
|
|
|
// Déterminer la couleur selon le taux de remplissage
|
|
const getColor = () => {
|
|
if (percentage < 70) return "bg-green-500";
|
|
if (percentage < 90) return "bg-orange-500";
|
|
return "bg-red-500";
|
|
};
|
|
|
|
// Déterminer la couleur du texte selon le taux de remplissage
|
|
const getTextColor = () => {
|
|
if (percentage < 70) return "text-green-600";
|
|
if (percentage < 90) return "text-orange-600";
|
|
return "text-red-600";
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between gap-4">
|
|
<span className="text-sm font-medium whitespace-nowrap">
|
|
{nbInscrits} / {capaciteMax}
|
|
</span>
|
|
<span className={cn("text-sm font-semibold whitespace-nowrap", getTextColor())}>
|
|
{percentage}%
|
|
</span>
|
|
</div>
|
|
<Progress
|
|
value={percentage}
|
|
className="h-2"
|
|
indicatorClassName={cn("transition-all", getColor())}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|