{renderSegments.map((segment, index) => (
<>
<div
className="absolute h-full bg-sky-500 transition-opacity"
style={{
left: `${segment.start}px`,
width: `${segment.width}px`,
opacity: segment.opacity,
}}
/>
<div
className="absolute top-1/2 -translate-y-1/2 text-xs text-white"
style={{
left: `${segment.start + 3}px`,
zIndex: 10,
}}
>
{segment.charges}
</div>
)}
</>
))}
{renderSegments.map((segment, index) => (
<>
<div
className="absolute h-full bg-sky-500 transition-opacity"
style={{
left: `${segment.start}px`,
width: `${segment.width}px`,
opacity: segment.opacity,
}}
/>
<div
className="absolute top-1/2 -translate-y-1/2 text-xs text-white"
style={{
left: `${segment.start + 3}px`,
zIndex: 10,
}}
>
{segment.charges}
</div>
)}
</>
))}