Health Bar

1import { cn } from "@/lib/utils";
2 
3interface HealthBarProps {
4  value: number;
5  label?: string;
6  showValue?: boolean;
7  className?: string;
8}
9 
10const getHealthColor = (value: number) => {
11  if (value >= 66) return "text-emerald-500";
12  if (value >= 33) return "text-yellow-500";
13  return "text-red-400";
14};
15 
16const HealthBar = ({
17  value,
18  label = "Health Factor",
19  showValue = true,
20  className,
21}: HealthBarProps) => {
22  const clamped = Math.max(0, Math.min(100, value));
23 
24  return (
25    <div className={cn("flex flex-col gap-2 w-full", className)}>
26      <div className="flex items-center justify-between">
27        <span className="text-sm text-muted-foreground">{label}</span>
28        {showValue && (
29          <span className={cn("text-sm font-medium", getHealthColor(clamped))}>
30            {clamped.toFixed(0)}%
31          </span>
32        )}
33      </div>
34      <div className="relative h-2.5 w-full rounded-full bg-muted">
35        <div
36          className="absolute inset-y-0 left-0 overflow-hidden rounded-full transition-all duration-300"
37          style={{ width: `${clamped}%` }}
38        >
39          <div
40            className="h-full bg-gradient-to-r from-red-400 via-yellow-500 to-emerald-500"
41            style={{ width: `${clamped > 0 ? (100 / clamped) * 100 : 100}%` }}
42          />
43        </div>
44      </div>
45    </div>
46  );
47};
48 
49export type { HealthBarProps };
50export { HealthBar };