Merge pull request #27 from filecoin-project/bp/progress-component

[UXIT-3443] Progress bar component

Author: CharlyMartin

src/components/ui/card.tsx

@@ -16,7 +16,7 @@ type CardContentProps = {
 }
 
 function CardWrapper({ children }: CardWrapperProps) {
-  return <div className="bg-zinc-900 p-6 rounded-lg">{children}</div>
+  return <div className="bg-zinc-900 p-6 rounded-lg space-y-6">{children}</div>
 }
 
 function CardHeader({ title, status }: CardHeaderProps) {

src/components/ui/progress-bar.tsx

@@ -0,0 +1,22 @@
+type ProgressBarProps = {
+  progress: number
+}
+
+function ProgressBar({ progress }: ProgressBarProps) {
+  if (progress < 0 || progress > 100) {
+    console.error('ProgressBar: progress must be between 0 and 100, received:', progress)
+  }
+
+  return (
+    <div className="flex items-center">
+      <div className="flex-1 h-1.5 bg-brand-100 rounded-full overflow-hidden">
+        <div
+          className="bg-brand-50 h-full rounded-full transition-all duration-300"
+          style={{ width: `${progress}%` }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export { ProgressBar }

src/components/upload/upload-progress.css

@@ -149,10 +149,7 @@
   color: white;
 }
 
-.step-content {
-  flex: 1;
-  min-width: 0;
-}
+
 
 .step-header {
   display: flex;

src/components/upload/upload-progress.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from 'react'
 import './upload-progress.css'
 import { CardHeader, CardWrapper } from '../ui/card.tsx'
+import { ProgressBar } from '../ui/progress-bar.tsx'
 
 export interface UploadProgress {
   step: 'creating-car' | 'uploading-car' | 'checking-readiness' | 'announcing-cids' | 'finalizing-transaction'
@@ -133,17 +134,10 @@ export default function UploadProgress({
             {/* Combined first stage: creating-car + checking-readiness + uploading-car */}
             {progress.find((p) => p.step === 'creating-car') && (
               <CardWrapper>
-                <div className="step-content">
-                  <CardHeader status={getCombinedFirstStageStatus()} title={getStepLabel('creating-car')} />
-                  {getCombinedFirstStageStatus() === 'in-progress' && (
-                    <div className="progress-bar-container">
-                      <div className="progress-bar">
-                        <div className="progress-fill" style={{ width: `${getCombinedFirstStageProgress()}%` }} />
-                      </div>
-                      <span className="progress-text">{getCombinedFirstStageProgress()}%</span>
-                    </div>
-                  )}
-                </div>
+                <CardHeader status={getCombinedFirstStageStatus()} title={getStepLabel('creating-car')} />
+                {getCombinedFirstStageStatus() === 'in-progress' && (
+                  <ProgressBar progress={getCombinedFirstStageProgress()} />
+                )}
               </CardWrapper>
             )}
 
@@ -156,18 +150,9 @@ export default function UploadProgress({
               .map((step) => {
                 return (
                   <CardWrapper key={step.step}>
-                    <div className="step-content">
-                      <CardHeader status={step.status} title={getStepLabel(step.step)} />
-                      {step.status === 'in-progress' && (
-                        <div className="progress-bar-container">
-                          <div className="progress-bar">
-                            <div className="progress-fill" style={{ width: `${step.progress}%` }} />
-                          </div>
-                          <span className="progress-text">{step.progress}%</span>
-                        </div>
-                      )}
-                      {step.error && <div className="error-message">{step.error}</div>}
-                    </div>
+                    <CardHeader status={step.status} title={getStepLabel(step.step)} />
+                    {step.status === 'in-progress' && <ProgressBar progress={step.progress} />}
+                    {step.error && <div className="error-message">{step.error}</div>}
                   </CardWrapper>
                 )
               })}