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;

src/components/Dnd/CreateLeadButton/CreateLeadButton.module.css

@@ -0,0 +1,19 @@
+.container {
+    /*background-color: red;*/
+    min-height: 5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    border: dashed var(--item-border-size) var(--mantine-color-default-border);
+    border-radius: var(--item-border-radius);
+    cursor: pointer;
+
+
+}
+
+.container:hover {
+    background-color: light-dark(var(--mantine-color-default-hover), var(--mantine-color-gray-filled-hover));
+
+}

src/components/Dnd/CreateLeadButton/CreateLeadButton.tsx

@@ -0,0 +1,60 @@
+import React, {FC, useState} from "react";
+
+import styles from './CreateLeadButton.module.css';
+import {Button, Center, rem, Text, TextInput, Transition} from '@mantine/core';
+
+type Props = {
+    onClick: () => void;
+}
+const CreateLeadButton: FC<Props> = ({onClick}) => {
+    const [isCreating, setIsCreating] = useState(false);
+    const [showButton, setShowButton] = useState(true);
+    console.log(`isCreating: ${isCreating}`)
+    console.log(`showButton: ${showButton}`)
+    return (
+        <div className={styles['container']}
+             onClick={() => {
+                 if (isCreating) return;
+                 setIsCreating(prevState => !prevState)
+                 setShowButton(false);
+             }}
+        >
+
+            {(!isCreating && showButton) &&
+                <Text>Быстрое добавление</Text>
+            }
+            <Transition
+                mounted={isCreating}
+                transition={'scale-y'}
+                duration={300}
+                // onExited={()=>setShowButton(true)}
+                keepMounted
+            >
+                {(styles) => <div style={{...styles, width: '100%'}}>
+                    <div style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        width: '100%',
+                        gap: rem(10),
+                        padding: rem(10)
+                    }}>
+                        <div style={{display: "flex", flexDirection: "column", width: '100%'}}>
+                            <TextInput placeholder={'Название'} w={'100%'}/>
+
+                        </div>
+
+                        <div style={{display: "flex", flexDirection: "column", width: '100%'}}>
+                            <TextInput placeholder={'Компания: название'} w={'100%'}/>
+                            <TextInput placeholder={'Компания: адрес'} w={'100%'}/>
+                        </div>
+                        <div style={{gap:rem(10), display:"flex"}}>
+                            <Button>Добавить</Button>
+                            <Button variant={'outline'} onClick={()=>setIsCreating(false)}>Отменить</Button>
+                        </div>
+                    </div>
+                </div>}
+            </Transition>
+        </div>
+    )
+}
+export default CreateLeadButton;