Progress Bar

1import { cn } from '@/lib/utils';
2import * as React from 'react';
3 
4/**
5 * Props for the ProgressBar component.
6 *
7 * @interface ProgressBarProps
8 * @extends {React.HTMLAttributes<HTMLDivElement>}
9 */
10export interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
11  /**
12   * The progress value as a percentage (0-100).
13   */
14  progress: number;
15}
16 
17/**
18 * A horizontal progress bar component that visualizes completion percentage.
19 *
20 * @component
21 * @example
22 * ```tsx
23 * <ProgressBar progress={75} />
24 * ```
25 */
26const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(
27  ({ progress, className, ...props }, ref) => {
28    return (
29      <div ref={ref} className={cn('relative h-0', className)} {...props}>
30        <div className="absolute top-1 h-1 w-full overflow-clip rounded-full bg-muted">
31          <div
32            className="h-full bg-primary transition-all duration-300 ease-in-out"
33            style={{ width: `${progress}%` }}
34          />
35        </div>
36      </div>
37    );
38  },
39);
40ProgressBar.displayName = 'ProgressBar';
41 
42export { ProgressBar };