Progress Bar

import { ProgressBar } from "@/components/ui/progress-bar";

export default function Example() {
  return <ProgressBar />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const ProgressBar = forwardRef(({ className, value = 0, max = 100, showLabel, variant = "default", ...props }, ref) => {
  const pct = Math.min(100, Math.max(0, (value / max) * 100));
  return (
    <div ref={ref} className={cn("relative w-full", className)} {...props}>
      <div className="h-2 w-full overflow-hidden rounded-full bg-muted">
        <div className={cn("h-full rounded-full transition-all duration-500",
          variant === "default" && "bg-primary",
          variant === "success" && "bg-green-500",
          variant === "warning" && "bg-yellow-500",
          variant === "danger" && "bg-red-500"
        )} style={{ width: `${pct}%` }} />
      </div>
      {showLabel && <span className="mt-1 block text-right text-xs text-muted-foreground">{Math.round(pct)}%</span>}
    </div>
  );
});
ProgressBar.displayName = "ProgressBar";

export { ProgressBar };