Spaces:
Sleeping
Sleeping
File size: 2,785 Bytes
f359e2d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | import { Check, Clock, AlertCircle } from 'lucide-react';
const ShootTimeline = ({ steps, currentStep, onStepClick }) => {
const stepIcons = {
confirmed: Check,
in_progress: Clock,
delivered: Check,
booked: Clock,
photos_ready: Check,
};
const stepColors = {
completed: 'bg-green-600 text-white',
current: 'bg-blue-600 text-white ring-4 ring-blue-200',
pending: 'bg-gray-300 text-gray-600',
};
const getStepStatus = (stepId) => {
const currentIndex = steps.findIndex(s => s.key === currentStep);
const stepIndex = steps.findIndex(s => s.key === stepId);
if (stepIndex < currentIndex) return 'completed';
if (stepIndex === currentIndex) return 'current';
return 'pending';
};
return (
<div className="w-full">
{/* Timeline */}
<div className="flex items-center justify-between mb-8">
{steps.map((step, idx) => {
const status = getStepStatus(step.key);
const Icon = step.icon;
const isLast = idx === steps.length - 1;
return (
<div key={step.key} className="flex items-center flex-1">
{/* Step Circle */}
<button
onClick={() => onStepClick?.(step.key)}
className={`flex items-center justify-center w-12 h-12 rounded-full font-bold transition-all flex-shrink-0 ${
stepColors[status]
} ${status === 'pending' ? 'cursor-not-allowed' : 'cursor-pointer hover:shadow-lg'}`}
>
{status === 'completed' ? (
<Check size={20} />
) : (
<Icon size={20} />
)}
</button>
{/* Step Label */}
<div className="ml-3 mr-auto">
<p className={`font-semibold ${status === 'pending' ? 'text-gray-500' : 'text-gray-900'}`}>
{step.label}
</p>
{status === 'current' && (
<p className="text-xs text-blue-600 font-medium">In Progress</p>
)}
</div>
{/* Connector Line */}
{!isLast && (
<div
className={`h-1 flex-1 mx-3 rounded-full transition-all ${
status === 'completed' ? 'bg-green-600' : 'bg-gray-300'
}`}
/>
)}
</div>
);
})}
</div>
{/* Current Step Info */}
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
<p className="text-sm text-blue-900">
<strong>Current Step:</strong> {steps.find(s => s.key === currentStep)?.label}
</p>
</div>
</div>
);
};
export default ShootTimeline;
|