feat: more stat components

web/src/components/ui/progress.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+const Progress = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> & { value?: number | null, indicatorClassName?: string }
+>(({ className, value, indicatorClassName, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            "relative h-4 w-full overflow-hidden rounded-full bg-secondary/20",
+            className
+        )}
+        {...props}
+    >
+        <div
+            className={cn("h-full w-full flex-1 bg-primary transition-all", indicatorClassName)}
+            style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+        />
+    </div>
+))
+Progress.displayName = "Progress"
+
+export { Progress }