21 lines
570 B
JavaScript
21 lines
570 B
JavaScript
import * as React from "react";
|
|
import * as ProgressPrimitive from "@radix-ui/react-progress";
|
|
|
|
const Progress = ({ value, max = 100, className, ...props }) => {
|
|
return (
|
|
<ProgressPrimitive.Root
|
|
value={value}
|
|
max={max}
|
|
className="relative w-full h-4 bg-gray-200 rounded-md overflow-hidden"
|
|
{...props}
|
|
>
|
|
<ProgressPrimitive.Indicator
|
|
className="absolute top-0 left-0 h-full bg-blue-600 transition-all"
|
|
style={{ width: `${(value / max) * 100}%` }}
|
|
/>
|
|
</ProgressPrimitive.Root>
|
|
);
|
|
};
|
|
|
|
export { Progress };
|