Glass Progress

1'use client';
2 
3import * as React from 'react';
4import { Progress as ProgressPrimitive } from 'radix-ui';
5 
6import { cn } from '@/lib/utils';
7 
8const GlassProgress = React.forwardRef<
9  React.ComponentRef<typeof ProgressPrimitive.Root>,
10  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
11>(({ className, value, ...props }, ref) => (
12  <ProgressPrimitive.Root
13    ref={ref}
14    value={value}
15    className={cn('h-2 w-full overflow-hidden rounded-full border border-glass-edge bg-glass backdrop-blur', className)}
16    {...props}
17  >
18    <ProgressPrimitive.Indicator
19      className="h-full rounded-full bg-ruri transition-transform dark:bg-ruri-soft"
20      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
21    />
22  </ProgressPrimitive.Root>
23));
24GlassProgress.displayName = ProgressPrimitive.Root.displayName;
25 
26export { GlassProgress };