i want another compnent under the graph that renders everytime the graph changes the coloumns in a verticall order scroolable it should update real time and show whohc colloumn is there 
"""
import React from 'react';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import Header from './Header';
import WorkoutBlocks from './WorkoutBlocks';
import Graph from './Graph'; // Updated graph

function App() {
  return (
    <DndProvider backend={HTML5Backend}>
      <div className="justify-center h-[100vh] bg-[#F8F8F8] w-full">
        <Header />

        {/* main content */}
        <div className="flex justify-between mx-6 my-3 items-start">
          {/* blocks card */}
          <WorkoutBlocks />

          {/* graph area */}
          <div className="w-full ml-6">
            <Graph /> {/* Updated graph */}
          </div>
        </div>
      </div>
    </DndProvider>
  );
}

export default App;

"""
"""
import React, { useState } from 'react';
import { useDrop } from 'react-dnd';

const Graph = () => {
  const [blocks, setBlocks] = useState([]);

  const [{ isOver }, drop] = useDrop(() => ({
    accept: 'WORKOUT_BLOCK',
    drop: (item, monitor) => {
      const offset = monitor.getClientOffset();
      if (offset) {
        handleDrop(item);
      }
    },
    collect: (monitor) => ({
      isOver: !!monitor.isOver(),
    }),
  }));

  const handleDrop = (item) => {
    // Check if the block type is already present
    if (blocks.some(block => block.type === item.type)) {
      return; // Do nothing if the block already exists
    }

    // Add the unique block to the graph
    setBlocks((prevBlocks) => [
      ...prevBlocks,
      { type: item.type, height: item.height },
    ]);
  };

  return (
    <div
      ref={drop}
      className="graph-container relative w-full h-[300px] bg-[#EAEAEA] rounded-lg shadow-md p-4"
    >
      <div className="absolute inset-0 flex items-end space-x-2 px-2">
        {blocks.map((block, index) => (
          <div
            key={index}
            className="bg-[#4339F280] rounded"
            style={{
              width: `calc(${80 / blocks.length}% - 4px)`,
              height: `${block.height}%`,
              marginRight: index === blocks.length - 1 ? '0' : '4px',
            }}
          />
        ))}
      </div>

      <div className="absolute bottom-0 w-full flex justify-between text-xs mt-1">
        {blocks.map((_, index) => (
          <span key={index}>{index + 1} km</span>
        ))}
      </div>

      <div className="absolute left-0 top-0 h-full flex flex-col justify-between text-xs mr-1">
        <span>100%</span>
        <span>75%</span>
        <span>50%</span>
        <span>25%</span>
        <span>0%</span>
      </div>
    </div>
  );
};

export default Graph;

"""
"""
import React from 'react';
import { useDrag } from 'react-dnd';
import { FiInfo } from 'react-icons/fi';

const WorkoutBlock = ({ children, type, height }) => {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: 'WORKOUT_BLOCK',
    item: { type, height },
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
  }));

  return (
    <div
      ref={drag}
      className={`relative bg-gray-200 rounded-lg overflow-hidden h-20 cursor-pointer ${
        isDragging ? 'opacity-50' : 'opacity-100'
      }`}
    >
      {children}
    </div>
  );
};

const WorkoutBlocks = () => {
  return (
    <div className="bg-white p-6 rounded-lg shadow-md max-w-sm mx-auto">
      <div className="flex justify-between items-center mb-3">
        <h2 className="text-lg font-semibold">Click or drag the blocks to build workout</h2>
        <FiInfo className="text-gray-400 text-2xl" />
      </div>

      <hr className="border-gray-300 mb-4" />

      <div className="grid grid-cols-3 gap-3">
        <WorkoutBlock type="block50" height={50}>
          <div className="absolute bottom-0 w-full h-1/2" style={{ background: '#4339F280' }}></div>
        </WorkoutBlock>

        <WorkoutBlock type="block75" height={75}>
          <div className="absolute bottom-0 w-full h-3/4" style={{ background: '#4339F280' }}></div>
        </WorkoutBlock>

        <WorkoutBlock type="block30" height={30}>
          <div className="absolute bottom-0 w-full h-1/3" style={{ background: '#4339F280' }}></div>
        </WorkoutBlock>

        {/* Single block with two columns */}
        <WorkoutBlock type="block60_40" height={60}>
          <div className="flex h-full gap-1 transform scale-y-[-1] ">
            <div className="w-1/2 h-3/5" style={{ background: '#4339F280' }}></div>
            <div className="w-1/2 h-2/5" style={{ background: '#4339F280' }}></div>
          </div>
        </WorkoutBlock>

        {/* Single block with four columns */}
        <WorkoutBlock type="block80_60_40_20" height={80}>
          <div className="flex h-full gap-1 transform scale-y-[-1]">
            <div className="w-1/4 h-1/5" style={{ background: '#4339F280' }}></div>
            <div className="w-1/4 h-2/5" style={{ background: '#4339F280' }}></div>
            <div className="w-1/4 h-3/5" style={{ background: '#4339F280' }}></div>
            <div className="w-1/4 h-4/5" style={{ background: '#4339F280' }}></div>
          </div>
        </WorkoutBlock>

        {/* Another single block with reversed four columns */}
        <WorkoutBlock type="block20_40_60_80" height={20}>
          <div className="flex h-full gap-1 transform scale-y-[-1] ">
            <div className="w-1/4 h-4/5" style={{ background: '#4339F280' }}></div>
            <div className="w-1/4 h-3/5" style={{ background: '#4339F280' }}></div>
            <div className="w-1/4 h-2/5" style={{ background: '#4339F280' }}></div>
            <div className="w-1/4 h-1/5" style={{ background: '#4339F280' }}></div>
          </div>
        </WorkoutBlock>
      </div>
    </div>
  );
};

export default WorkoutBlocks;