6974c12a25
- Created automated script (scripts/align-8px-grid.py) to align all spacing to 8px grid - Replaced non-8px-aligned spacing: gap-3/p-3/m-3 (12px) → gap-4/p-4/m-4 (16px), gap-5/p-5/m-5 (20px) → gap-6/p-6/m-6 (24px), gap-10/p-10/m-10 (40px) → gap-12/p-12/m-12 (48px), gap-20/p-20/m-20 (80px) → gap-24/p-24/m-24 (96px) - Preserved: 4px values (gap-1, p-1, m-1) as they may be intentional fine-tuning, responsive breakpoints (sm:, md:, lg:), test files, documentation - Modified files across all components to ensure consistent 8px grid alignment - Action 11.2.1.3: Align all elements to 8px grid - COMPLETE
75 lines
2.2 KiB
TypeScript
75 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { Play, Pause, X } from 'lucide-react';
|
|
|
|
interface UploadProgressBarProps {
|
|
progress: number; // 0 to 100
|
|
status: 'uploading' | 'paused' | 'completed' | 'error' | 'processing';
|
|
onPause?: () => void;
|
|
onResume?: () => void;
|
|
onCancel?: () => void;
|
|
}
|
|
|
|
export const UploadProgressBar: React.FC<UploadProgressBarProps> = ({
|
|
progress,
|
|
status,
|
|
onPause,
|
|
onResume,
|
|
onCancel,
|
|
}) => {
|
|
const isPaused = status === 'paused';
|
|
const isCompleted = status === 'completed';
|
|
const isError = status === 'error';
|
|
|
|
const getColor = () => {
|
|
if (isError) return 'bg-kodo-red';
|
|
if (isCompleted) return 'bg-kodo-lime';
|
|
if (isPaused) return 'bg-kodo-gold';
|
|
return 'bg-kodo-cyan';
|
|
};
|
|
|
|
return (
|
|
<div className="w-full flex items-center gap-4">
|
|
<div className="flex-1">
|
|
<div className="flex justify-between text-[10px] uppercase font-bold text-kodo-content-dim mb-1">
|
|
<span>{status}</span>
|
|
<span>{Math.round(progress)}%</span>
|
|
</div>
|
|
<div className="h-1.5 bg-kodo-steel/50 rounded-full overflow-hidden">
|
|
<div
|
|
className={`h-full transition-all duration-300 ${getColor()} ${status === 'uploading' ? 'animate-pulse' : ''}`}
|
|
style={{ width: `${progress}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{!isCompleted && !isError && (
|
|
<div className="flex gap-1">
|
|
{isPaused ? (
|
|
<button
|
|
onClick={onResume}
|
|
className="p-1 hover:text-white text-kodo-lime transition-colors"
|
|
title="Resume"
|
|
>
|
|
<Play className="w-3 h-3 fill-current" />
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={onPause}
|
|
className="p-1 hover:text-white text-kodo-gold transition-colors"
|
|
title="Pause"
|
|
>
|
|
<Pause className="w-3 h-3 fill-current" />
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={onCancel}
|
|
className="p-1 hover:text-white text-kodo-red transition-colors"
|
|
title="Cancel"
|
|
>
|
|
<X className="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|