progress.tsx 677 B

1234567891011121314151617181920212223242526272829
  1. "use client"
  2. import * as React from "react"
  3. import { cn } from "@/lib/utils"
  4. interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
  5. value?: number
  6. }
  7. const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
  8. ({ className, value, ...props }, ref) => (
  9. <div
  10. ref={ref}
  11. className={cn(
  12. "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
  13. className
  14. )}
  15. {...props}
  16. >
  17. <div
  18. className="h-full w-full flex-1 bg-primary transition-all"
  19. style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
  20. />
  21. </div>
  22. )
  23. )
  24. Progress.displayName = "Progress"
  25. export { Progress }