hye cna you make the behaviour when user drags any block from the bottom three the 2nd row where there are mutiple coloumns in the same workblock it should show as it is if mutiple show mutiole colomuns not single 

"""

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 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;



"""

"""

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;