← back to ClawCoder

src/components/ui/progress-indicator.tsx

30 lines

'use client'

interface ProgressIndicatorProps {
  current: number
  total: number
}

export function ProgressIndicator({ current, total }: ProgressIndicatorProps) {
  const percentage = total > 0 ? Math.round((current / total) * 100) : 0

  return (
    <div className="w-full">
      <p className="mb-2 text-sm font-medium text-slate-600">
        Step {current} of {total}
      </p>
      <div className="h-1 w-full overflow-hidden rounded-full bg-slate-200">
        <div
          role="progressbar"
          aria-valuenow={current}
          aria-valuemin={0}
          aria-valuemax={total}
          aria-label={`Step ${current} of ${total}`}
          className="h-full rounded-full bg-blue-600 transition-all duration-300 motion-reduce:transition-none"
          style={{ width: `${percentage}%` }}
        />
      </div>
    </div>
  )
}