import React, { useState } from 'react';

const Bar = () => {
  const [width, setWidth] = useState(50); // initial width of the bar is 50%
  
  const handleClick = (e) => {
    const { width: barWidth, left } = e.currentTarget.getBoundingClientRect();
    const newWidth = Math.floor((e.clientX - left) / barWidth * 100);
    setWidth(newWidth);
  }
  
  return (
    <div
      style={{
        width: '100%',
        height: 30,
        backgroundColor: 'lightgray',
        position: 'relative'
      }}
      onClick={handleClick}
    >
      <div
        style={{
          width: `${width}%`,
          height: '100%',
          position: 'absolute',
          top: 0,
          left: 0,
          backgroundColor: 'red'
        }}
      />
      <div
        style={{
          width: `${100 - width}%`,
          height: '100%',
          position: 'absolute',
          top: 0,
          right: 0,
          backgroundColor: 'blue'
        }}
      />
    </div>
  );
};

export default Bar;