crap

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

@@ -0,0 +1,24 @@
+.container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    /*background-color: green;*/
+
+}
+
+.header {
+    display: flex;
+    align-items: stretch;
+    text-align: center;
+    flex-direction: column;
+    /*border: solid var(--item-border-size) var(--mantine-color-default-border);*/
+    /*border-radius: var(--item-border-radius);*/
+}
+
+.items-list {
+    gap: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    /*background-color: red;*/
+    height: 100%;
+}

src/components/Dnd/Board/Board.tsx

@@ -0,0 +1,53 @@
+import {FC} from "react";
+import styles from './Board.module.css';
+import {Divider, Text, Title} from '@mantine/core';
+import {Draggable, Droppable} from "@hello-pangea/dnd";
+import CreateLeadButton from "../CreateLeadButton/CreateLeadButton.tsx";
+
+type Props = {
+    droppableId: string;
+    title: string;
+    withCreateButton?: boolean;
+}
+
+export const Board: FC<Props> = ({droppableId, title, withCreateButton = false}) => {
+
+
+    return (
+        <div className={styles["container"]}>
+            <div className={styles["header"]}>
+                <Title size={"h4"}>{title}</Title>
+                <Text>12 сделок: 500р</Text>
+                <Divider size={"xl"} my={10} color={"blue"}/>
+            </div>
+            <Droppable droppableId={droppableId}>
+                {(provided, snapshot) => (
+                    <div ref={provided.innerRef} className={styles["items-list"]}>
+                        {withCreateButton &&
+                            <CreateLeadButton
+
+                                onClick={() => {
+                                }}
+                            />}
+                        <Draggable draggableId={droppableId + '1'} index={1}>
+                            {(provided, snapshot) => (
+                                <div            {...provided.draggableProps}
+                                                {...provided.dragHandleProps}
+                                                ref={provided.innerRef}
+                                >
+                                </div>
+
+                            )}
+                        </Draggable>
+
+
+                        {provided.placeholder}
+                    </div>
+                )}
+            </Droppable>
+
+        </div>
+    )
+}
+
+export default Board;