feat: division between mobile and desktop components, boards for mobile

src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.tsx

@@ -0,0 +1,69 @@
+import React, { ReactNode } from "react";
+import { Box, Group, Text } from "@mantine/core";
+import StatusMenu from "@/app/deals/components/shared/StatusMenu/StatusMenu";
+import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
+import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
+import { StatusSchema } from "@/lib/client";
+import styles from "./StatusColumnWrapper.module.css";
+
+type Props = {
+    status: StatusSchema;
+    isDragging?: boolean;
+    children: ReactNode;
+};
+
+const StatusColumnWrapper = ({
+    status,
+    children,
+    isDragging = false,
+}: Props) => {
+    const { onUpdateStatus } = useStatusesContext();
+
+    const handleSave = (value: string) => {
+        const newValue = value.trim();
+        if (newValue && newValue !== status.name) {
+            onUpdateStatus(status.id, { name: newValue });
+        }
+    };
+
+    return (
+        <Box
+            mx={7}
+            className={styles.container}>
+            <Group
+                justify={"space-between"}
+                className={"flex-nowrap border-b-3 border-blue-500 mb-3 p-3"}>
+                <InPlaceInput
+                    defaultValue={status.name}
+                    onComplete={value => handleSave(value)}
+                    inputStyles={{
+                        input: {
+                            height: 25,
+                            minHeight: 25,
+                        },
+                    }}
+                    getChildren={startEditing => (
+                        <>
+                            <Text
+                                style={{
+                                    cursor: "grab",
+                                    userSelect: "none",
+                                    opacity: isDragging ? 0.5 : 1,
+                                }}>
+                                {status.name}
+                            </Text>
+                            <StatusMenu
+                                status={status}
+                                handleEdit={startEditing}
+                            />
+                        </>
+                    )}
+                    modalTitle={"Редактирование статуса"}
+                />
+            </Group>
+            {children}
+        </Box>
+    );
+};
+
+export default StatusColumnWrapper;