13 lines
596 B
TypeScript
13 lines
596 B
TypeScript
"use client";
|
|
|
|
import * as ProgressPrimitive from "@radix-ui/react-progress";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function Progress({ value = 0, className }: { value?: number; className?: string }) {
|
|
return (
|
|
<ProgressPrimitive.Root className={cn("relative h-2 w-full overflow-hidden rounded-full bg-slate-100", className)} value={value}>
|
|
<ProgressPrimitive.Indicator className="h-full bg-gradient-to-r from-cyan-400 via-fuchsia-500 to-yellow-300 transition-transform" style={{ transform: `translateX(-${100 - Math.min(value, 100)}%)` }} />
|
|
</ProgressPrimitive.Root>
|
|
);
|
|
}
|