this is my current code. I want to keep this structure but I want my component to look like what you showed me import React from 'react'; import { TRACKING_STATUSES } from '../constants'; import { getColorClass, getGradientClass } from '../utils'; const TrackingStatus = ({ status }) => { if (status?.toLowerCase() === 'notfound' || status?.toLowerCase() === 'pending') { return null; } const steps = [ { ...TRACKING_STATUSES.inforeceived, status: 'inforeceived' }, { ...TRACKING_STATUSES.transit, status: 'transit' }, { ...TRACKING_STATUSES.pickup, status: 'pickup' }, { ...TRACKING_STATUSES.delivered, status: 'delivered' } ]; const currentStatusIndex = steps.findIndex(step => step.status === status.toLowerCase()); return ( <div className="w-full bg-emerald-50 p-4 rounded-lg"> <div className="relative flex items-center"> {steps.map((step, index) => { const isCompleted = index < currentStatusIndex; const isCurrent = index === currentStatusIndex; const previousStatus = index > 0 ? steps[index - 1].status : null; return ( <div key={index} className="relative flex items-center"> {isCompleted && previousStatus && ( <div className={`h-[2px]`} style={{ width: '50%' }} /> )} <div className={`h-[2px] ${isCompleted ? getColorClass(step.status) : 'bg-gray-200'}`} style={{ width: '50%' }} /> <div className={`w-8 h-8 p-1 rounded-full flex items-center justify-center z-10 ${isCompleted ? getColorClass(step.status) : 'bg-gray-100 text-gray-400'}`}> {step.icon} </div> </div> ); })} </div> </div> ); }; export default TrackingStatus;