Files
pezkuwi-p2p-mobile/src/components/ui/progress.tsx
T
pezkuwichain bc7ab9b2a4 Initial P2P mobile frontend
- Copy P2P components from pwap/web
- Mobile-optimized P2P trading interface
- To be deployed at telegram.pezkuwichain.io/p2p
2026-01-31 08:51:45 +03:00

38 lines
1.1 KiB
TypeScript

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"
import { cn } from "@/lib/utils"
interface ProgressProps extends
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
variant?: "default" | "success" | "warning" | "error"
}
const Progress = React.forwardRef<
React.ElementRef<typeof ProgressPrimitive.Root>,
ProgressProps
>(({ className, value, variant = "default", ...props }, ref) => (
<ProgressPrimitive.Root
ref={ref}
className={cn(
"relative h-2 w-full overflow-hidden rounded-full bg-secondary/40",
className
)}
{...props}
>
<ProgressPrimitive.Indicator
className={cn(
"h-full w-full flex-1 transition-all duration-300 ease-in-out",
variant === "default" && "bg-primary",
variant === "success" && "bg-green-500",
variant === "warning" && "bg-yellow-500",
variant === "error" && "bg-destructive",
)}
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
/>
</ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName
export { Progress }