build: 55712324-398e-4334-a254-fc30c84b2e47

2026-05-25 18:50:48 +00:00
commit 125733a7c8
106 changed files with 9373 additions and 0 deletions
@@ -0,0 +1,77 @@
+import React from 'react';
+import { IonProgressBar } from '@ionic/react';
+
+interface CustomProgressBarProps {
+  value: number; // 0 to 1
+  label?: string;
+  statusText?: string;
+  color?: string; // Hex, rgb, or css variable
+  showPercent?: boolean;
+  style?: React.CSSProperties;
+}
+
+export const CustomProgressBar: React.FC<CustomProgressBarProps> = ({
+  value,
+  label,
+  statusText,
+  color = 'var(--ion-color-primary)',
+  showPercent = true,
+  style,
+}) => {
+  const percentage = Math.round(Math.min(Math.max(value, 0), 1) * 100);
+
+  return (
+    <div style={{ width: '100%', ...style }}>
+      {/* Label and Status */}
+      {(label || statusText || showPercent) && (
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'baseline',
+            fontSize: '0.8rem',
+            marginBottom: '6px',
+            fontWeight: '600',
+          }}
+        >
+          <span style={{ color: 'var(--ion-color-medium)' }}>
+            {label}{' '}
+            {statusText && (
+              <span style={{ fontWeight: 'normal', opacity: 0.85 }}>
+                • {statusText}
+              </span>
+            )}
+          </span>
+          {showPercent && (
+            <span
+              style={{
+                color: color,
+                fontVariantNumeric: 'tabular-nums',
+                fontFamily: 'ui-monospace, monospace',
+                fontWeight: '700',
+              }}
+            >
+              {percentage}%
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* Progress Track */}
+      <IonProgressBar
+        value={value}
+        style={
+          {
+            height: '6px',
+            '--background': 'rgba(148, 163, 184, 0.1)',
+            '--progress-background': color,
+            borderRadius: '10px',
+            transition: 'value 0.3s ease',
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+};
+
+export default CustomProgressBar;