openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import * as ProgressPrimitive from "@radix-ui/react-progress";
4import type * as React from "react";
5
6import { cn } from "@/lib/utils";
7
8function Progress({
9 className,
10 value,
11 ...props
12}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
13 return (
14 <ProgressPrimitive.Root
15 data-slot="progress"
16 className={cn(
17 "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
18 className,
19 )}
20 {...props}
21 >
22 <ProgressPrimitive.Indicator
23 data-slot="progress-indicator"
24 className="h-full w-full flex-1 bg-primary transition-all"
25 style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
26 />
27 </ProgressPrimitive.Root>
28 );
29}
30
31export { Progress };