1. import { Col, Input, Row, Space } from 'antd'
2. import React, { useState } from 'react'
3. import styled from 'styled-components'
4. import { DndProvider, useDrop } from 'react-dnd'
5. import { HTML5Backend } from 'react-dnd-html5-backend'
6. import DraggableButton from './draggable-button'
7. import { useImmer } from 'use-immer'
8.  
9. export const ComponentBuildPage2: React.FC = () => {
10.  
11.     const [width, setWidth] = useState(1)
12.     const [height, setHeight] = useState(1)
13.  
14.     const [droppedList, setDroppedList] = useImmer([])
15.     const [buttons, setButtons] = useImmer([
16.         {
17.             label: "Widget",
18.             id: 1,
19.             width: 3,
20.             height: 1,
21.         },
22.         {
23.             label: "Widget",
24.             id: 2,
25.             width: 2,
26.             height: 1,
27.         },
28.         {
29.             label: "Widget",
30.             id: 3,
31.             width: 1,
32.             height: 1,
33.         },
34.         {
35.             label: "Widget",    
36.             id: 4,
37.             width: 1,
38.             height: 1,
39.         },
40.  
41.     ])
42.  
43.     const [{ isOver }, drop] = useDrop(() => ({
44.         accept: "buton",
45.         drop: (droppedItem) => { dropImageToBoard(droppedItem) },
46.         collect: (monitor) => ({
47.             isOver: !!monitor.isOver(),
48.         })
49.     }));
50.  
51.     let dropImageToBoard = (droppedItem) => {
52.         if (droppedItem?.id) {
53.             setButtons(buttons=>{
54.                 return buttons
55.             })
56.             const newButton = buttons.find(b => b.id == droppedItem.id)
57.             setDroppedList((list) => [...list, newButton])
58.             setButtons(btns => btns.filter(btn => btn.id !== droppedItem.id))
59.         }
60.     }
61.  
62.     const createWidget = () => {
63.         setButtons(btns => [...btns, {
64.             label: "Widgett",
65.             id: generateUniqueId(),
66.             width,
67.             height,
68.         }])
69.  
70.     }
71.  
72.     const generateUniqueId = () => {
73.         const combinedArray = [...buttons, ...droppedList];
74.         let id = 1;
75.         while (combinedArray.some(obj => obj.id === id)) {
76.             id++;
77.         }
78.         return id;
79.     }
80.  
81.  
82.     return <Wrapper>
83.  
84.  
85.         <div ref={drop} >
86.             {[...Array(8)].map((e, j) => <Row key={j} gutter={[48, 48]}>
87.                 {[...Array(24)].map((e, i) => <Col key={i + 1} span={1}>
88.                     <div className='cell' >
89.                         {
90.                             droppedList[(((i + 1) + (j * 24)) - 1)] ? <DraggableButton id={droppedList[(((i + 1) + (j * 24)) - 1)].id} >{`${droppedList[(((i + 1) + (j * 24)) - 1)].width} x ${droppedList[(((i + 1) + (j * 24)) - 1)].height}`}</DraggableButton> : <span>{((i + 1) + (j * 24))}</span>
91.                         }
92.                     </div>
93.                 </Col>)}
94.             </Row>)}
95.         </div>
96.  
97.         <div className='tools' >
98.             <div className='d-flex align-items-center'>
99.                 &lt;Input.Group compact&gt;
100.                     &lt;Input disabled  width: '15%' }} value={"Width"} /&gt;
101.                     &lt;Input  =&gt; { setWidth(parseInt(e.target.value)) }}  width: '15%' }} value={width} />
102.                     &lt;Input disabled  width: '15%' }} value={"Height"} /&gt;
103.                     &lt;Input  =&gt; { setHeight(parseInt(e.target.value)) }}  width: '15%' }} value={height} />
104.                 &lt;/Input.Group&gt;
105.                 <button  >Create Widget</button>
106.             </div>
107.             <div className='draggable-items' >
108.                 {buttons.map((btn, i) => <DraggableButton key={btn.id} id={btn.id} >{`${btn.width} x ${btn.height}`}</DraggableButton>)}
109.             </div>
110.         </div>
111.  
112.  
113.     </Wrapper >
114. }
115.  
116. const Wrapper = styled('div')`
117.     padding: 0 50px;
118.     font-family: 'Roboto';
119.  
120.     .ant-col{
121.         padding: 0 !important;
122.     }
123.  
124.     .cell{
125.         width: 100%;
126.         height: 100%;
127.         min-height: 60px;
128.         background-color: aliceblue;
129.         border: 1px solid lightgrey;
130.         display: flex;
131.         align-items: center;
132.         justify-content: center;
133.     }
134.  
135.     .tools{
136.         margin-top: 16px;
137.         display: flex;
138.         flex-flow: column;
139.         align-items: start;
140.         justify-content: start;
141.         gap: 16px;
142.     }
143.  
144. `