non ai theme

src/components/ui/Progress.tsx

@@ -0,0 +1,37 @@
+import type { HTMLAttributes } from 'react'
+import { cn } from '../../utils/cn'
+
+type ProgressProps = HTMLAttributes<HTMLDivElement> & {
+  value?: number
+  max?: number
+  indeterminate?: boolean
+  label?: string
+}
+
+export function Progress({
+  value = 0,
+  max = 100,
+  indeterminate = false,
+  label,
+  className,
+  ...props
+}: ProgressProps) {
+  const percentage = Math.min(Math.max(Math.round((value / max) * 100), 0), 100)
+
+  return (
+    <div className={cn('stack-xs', className)} {...props}>
+      {(label || !indeterminate) && (
+        <div className="flex-between" style={{ fontSize: 'var(--text-xs)', color: 'var(--muted-foreground)' }}>
+          {label && <span>{label}</span>}
+          {!indeterminate && <span style={{ fontFamily: 'var(--font-mono)' }}>{percentage}%</span>}
+        </div>
+      )}
+      <div className="progress-container">
+        <div
+          className={cn('progress-fill', indeterminate && 'progress-indeterminate')}
+          style={!indeterminate ? { width: `${percentage}%` } : undefined}
+        />
+      </div>
+    </div>
+  )
+}