Skip to content

Commit fc06431

Browse files
committed
feat(webapp): add Progress component for UI cohesion
introduce new `Progress` component with Radix integration for consistent progress indicator styling. Enhances UI capabilities and prepares for future usage.
1 parent bc24254 commit fc06431

File tree

1 file changed

+24
-0
lines changed

1 file changed

+24
-0
lines changed
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as React from 'react';
2+
3+
import * as ProgressPrimitive from '@radix-ui/react-progress';
4+
5+
import { cn } from '@/lib/utils';
6+
7+
const Progress = React.forwardRef<
8+
React.ElementRef<typeof ProgressPrimitive.Root>,
9+
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
10+
>(({ className, value, ...props }, ref) => (
11+
<ProgressPrimitive.Root
12+
ref={ref}
13+
className={cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', className)}
14+
{...props}
15+
>
16+
<ProgressPrimitive.Indicator
17+
className="bg-primary h-full w-full flex-1 transition-all"
18+
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
19+
/>
20+
</ProgressPrimitive.Root>
21+
));
22+
Progress.displayName = ProgressPrimitive.Root.displayName;
23+
24+
export { Progress };

0 commit comments

Comments
 (0)