crap

src/components/Dnd/Board/Board.module.css

@@ -21,4 +21,20 @@
     flex-direction: column;
     /*background-color: red;*/
     height: 100%;
+}
+
+.items-list::after {
+    height: 5rem;
+    content: "";
+}
+
+.items-list-drag-over {
+    @mixin light {
+        background-color: var(--mantine-color-gray-1);
+    }
+    @mixin dark {
+        background-color: var(--mantine-color-dark-5);
+
+    }
+    border-radius: var(--item-border-radius);
 }

src/components/Dnd/Board/Board.tsx

@@ -3,14 +3,18 @@ import styles from './Board.module.css';
 import {Divider, Text, Title} from '@mantine/core';
 import {Draggable, Droppable} from "@hello-pangea/dnd";
 import CreateDealButton from "../CreateDealButton/CreateDealButton.tsx";
+import {DealSummary} from "../../../client";
+import DealSummaryCard from "../DealSummaryCard/DealSummaryCard.tsx";
+import classNames from "classnames";
 
 type Props = {
     droppableId: string;
     title: string;
     withCreateButton?: boolean;
+    summaries: DealSummary[];
 }
 
-export const Board: FC<Props> = ({droppableId, title, withCreateButton = false}) => {
+export const Board: FC<Props> = ({droppableId, title, summaries, withCreateButton = false}) => {
 
 
     return (
@@ -20,26 +24,43 @@ export const Board: FC<Props> = ({droppableId, title, withCreateButton = false})
                 <Text>12 сделок: 500р</Text>
                 <Divider size={"xl"} my={10} color={"blue"}/>
             </div>
-            <Droppable droppableId={droppableId}>
-                {(provided) => (
-                    <div ref={provided.innerRef} className={styles["items-list"]}>
+            <Droppable
+                droppableId={droppableId}
+            >
+                {(provided, snapshot) => (
+                    <div ref={provided.innerRef}
+                         className={classNames(
+                             styles["items-list"],
+                             (snapshot.isDraggingOver && !snapshot.draggingFromThisWith)
+                             && styles["items-list-drag-over"]
+                         )}
+                         {...provided.droppableProps}
+                    >
                         {withCreateButton &&
                             <CreateDealButton
 
                                 onClick={() => {
                                 }}
                             />}
-                        <Draggable draggableId={droppableId + '1'} index={1}>
-                            {(provided) => (
-                                <div            {...provided.draggableProps}
-                                                {...provided.dragHandleProps}
-                                                ref={provided.innerRef}
+                        {summaries.map(summary =>
+                            (
+                                <Draggable
+                                    draggableId={summary.id.toString()}
+                                    index={1}
+                                    key={summary.id}
                                 >
-                                </div>
+                                    {(provided) => (
+                                        <div            {...provided.draggableProps}
+                                                        {...provided.dragHandleProps}
+                                                        ref={provided.innerRef}
 
-                            )}
-                        </Draggable>
+                                        >
+                                            <DealSummaryCard dealSummary={summary}/>
+                                        </div>
 
+                                    )}
+                                </Draggable>
+                            ))}
 
                         {provided.placeholder}
                     </div>