fix: mantine carousel

package.json

@@ -13,6 +13,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
+    "@mantine/carousel": "^8.2.4",
     "@mantine/core": "8.1.2",
     "@mantine/form": "^8.1.3",
     "@mantine/hooks": "8.1.2",
@@ -25,6 +26,8 @@
     "@tanstack/react-query": "^5.83.0",
     "axios": "^1.11.0",
     "classnames": "^2.5.1",
+    "embla-carousel": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
     "framer-motion": "^12.23.7",
     "i18n-iso-countries": "^7.14.0",
     "lexorank": "^1.0.5",

src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.module.css

@@ -0,0 +1,12 @@
+
+.container {
+    flex-wrap: nowrap;
+    border-bottom: solid blue 3px;
+    margin-bottom: 3px;
+    cursor: pointer;
+
+    @media (max-width: 48em) {
+        width: 80vw;
+        margin-right: 8vw;
+    }
+}

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

@@ -1,37 +1,37 @@
 import React from "react";
 import { IconPlus } from "@tabler/icons-react";
-import { Box } from "@mantine/core";
+import { Box, Center, Stack } from "@mantine/core";
 import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
 import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
+import styles from "./CreateStatusButton.module.css";
 
 const CreateStatusButton = () => {
     const { onCreateStatus } = useStatusesContext();
 
     return (
-        <Box
+        <Stack>
-            ml={6}
+            <Box
-            className={"flex-nowrap border-b-3 border-blue-500 mb-3"}
+                ml={6}
-            style={{
+                className={styles.container}>
-                cursor: "pointer",
+                <InPlaceInput
-            }}>
+                    placeholder={"Название колонки"}
-            <InPlaceInput
+                    onComplete={onCreateStatus}
-                placeholder={"Название колонки"}
+                    getChildren={startEditing => (
-                onComplete={onCreateStatus}
+                        <Center
-                getChildren={startEditing => (
+                            p={15}
-                    <Box
+                            onClick={() => startEditing()}>
-                        p={15}
+                            <IconPlus size={20} />
-                        onClick={() => startEditing()}>
+                        </Center>
-                        <IconPlus size={20} />
+                    )}
-                    </Box>
+                    modalTitle={"Создание колонки"}
-                )}
+                    inputStyles={{
-                modalTitle={"Создание колонки"}
+                        wrapper: {
-                inputStyles={{
+                            padding: 4,
-                    wrapper: {
+                        },
-                        padding: 4,
+                    }}
-                    },
+                />
-                }}
+            </Box>
-            />
+        </Stack>
-        </Box>
     );
 };
 

src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css

@@ -4,6 +4,6 @@
     width: 15vw;
 
     @media (max-width: 48em) {
-        width: 90vw;
+        width: 80vw;
     }
 }

src/app/layout.tsx

@@ -1,5 +1,6 @@
 import "@mantine/core/styles.css";
 import "@mantine/notifications/styles.css";
+import "@mantine/carousel/styles.css";
 import { ReactNode } from "react";
 import {
     ColorSchemeScript,

src/components/dnd/FunnelDnd/FunnelDnd.module.css

@@ -12,3 +12,22 @@
         }
     }
 }
+
+.indicator {
+    height: 4px;
+    @mixin light {
+        background-color: lightgray;
+    }
+    @mixin dark {
+        background-color: var(--mantine-color-dark-6);
+    }
+
+    &[data-active] {
+        @mixin light {
+            background-color: gray;
+        }
+        @mixin dark {
+            background-color: var(--mantine-color-dark-5);
+        }
+    }
+}

src/components/dnd/FunnelDnd/FunnelDnd.tsx

@@ -12,7 +12,8 @@ import {
     horizontalListSortingStrategy,
     SortableContext,
 } from "@dnd-kit/sortable";
-import { Group, ScrollArea } from "@mantine/core";
+import { Carousel } from "@mantine/carousel";
+import { Group } from "@mantine/core";
 import CreateStatusButton from "@/app/deals/components/shared/CreateStatusButton/CreateStatusButton";
 import useDndSensors from "@/app/deals/hooks/useSensors";
 import FunnelColumn from "@/components/dnd/FunnelDnd/FunnelColumn";
@@ -20,6 +21,7 @@ import FunnelOverlay from "@/components/dnd/FunnelDnd/FunnelOverlay";
 import { BaseDraggable } from "@/components/dnd/types/types";
 import useIsMobile from "@/hooks/useIsMobile";
 import SortableItem from "../SortableItem";
+import styles from "./FunnelDnd.module.css";
 
 type Props<TContainer, TItem> = {
     containers: TContainer[];
@@ -89,18 +91,16 @@ const FunnelDnd = <
     const renderBody = () => (
         <>
             {isMobile ? (
-                <ScrollArea type={"never"}>
+                <Carousel
-                    <Group
+                    slideSize={"80%"}
-                        style={{
+                    slideGap={"md"}
-                            gap: 0,
+                    pb={"xl"}
-                            display: "flex",
+                    withControls={false}
-                            flexWrap: "nowrap",
+                    withIndicators
-                            alignItems: "start",
+                    classNames={styles}>
-                        }}>
+                    {renderContainers()}
-                        {renderContainers()}
+                    <CreateStatusButton />
-                        <CreateStatusButton />
+                </Carousel>
-                    </Group>
-                </ScrollArea>
             ) : (
                 renderContainers()
             )}

yarn.lock

@@ -2857,6 +2857,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mantine/carousel@npm:^8.2.4":
+  version: 8.2.4
+  resolution: "@mantine/carousel@npm:8.2.4"
+  peerDependencies:
+    "@mantine/core": 8.2.4
+    "@mantine/hooks": 8.2.4
+    embla-carousel: ">=8.0.0"
+    embla-carousel-react: ">=8.0.0"
+    react: ^18.x || ^19.x
+    react-dom: ^18.x || ^19.x
+  checksum: 10c0/3aa2700d5e3bf6be1316af3a48ba006db7ed1490ece78417952aa8b32afbaadc3195daffcf8eb9f60f469c2135c130d32d1494f30cb5a8a8fa991a97c37e3a58
+  languageName: node
+  linkType: hard
+
 "@mantine/core@npm:8.1.2":
   version: 8.1.2
   resolution: "@mantine/core@npm:8.1.2"
@@ -6107,6 +6121,7 @@ __metadata:
     "@hey-api/client-next": "npm:^0.5.1"
     "@hey-api/openapi-ts": "npm:^0.80.1"
     "@ianvs/prettier-plugin-sort-imports": "npm:^4.4.2"
+    "@mantine/carousel": "npm:^8.2.4"
     "@mantine/core": "npm:8.1.2"
     "@mantine/form": "npm:^8.1.3"
     "@mantine/hooks": "npm:8.1.2"
@@ -6136,6 +6151,8 @@ __metadata:
     axios: "npm:^1.11.0"
     babel-loader: "npm:^10.0.0"
     classnames: "npm:^2.5.1"
+    embla-carousel: "npm:^8.6.0"
+    embla-carousel-react: "npm:^8.6.0"
     eslint: "npm:^9.29.0"
     eslint-config-mantine: "npm:^4.0.3"
     eslint-plugin-eslint-comments: "npm:^3.2.0"
@@ -6728,6 +6745,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"embla-carousel-react@npm:^8.6.0":
+  version: 8.6.0
+  resolution: "embla-carousel-react@npm:8.6.0"
+  dependencies:
+    embla-carousel: "npm:8.6.0"
+    embla-carousel-reactive-utils: "npm:8.6.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+  checksum: 10c0/461b0c427a6fca62e730c7b39d08e9c55b01a2138c173d5b9ebf77ec92092a900b45ac384731c77382b48d5d65946994d3abba6e9899a66d6e16f8ddf191ed1c
+  languageName: node
+  linkType: hard
+
+"embla-carousel-reactive-utils@npm:8.6.0":
+  version: 8.6.0
+  resolution: "embla-carousel-reactive-utils@npm:8.6.0"
+  peerDependencies:
+    embla-carousel: 8.6.0
+  checksum: 10c0/33d07e6df4d8dec9b4fc95858838ea2d5e5df078039c05b2a342c05ba4979d8d18564a1c607da445fed744daf969a0b5a90124ce487a854e86ced6f0458b51e9
+  languageName: node
+  linkType: hard
+
+"embla-carousel@npm:8.6.0, embla-carousel@npm:^8.6.0":
+  version: 8.6.0
+  resolution: "embla-carousel@npm:8.6.0"
+  checksum: 10c0/f4c598e7be28b70340d31ffd2bebb2472db370b0c81d9b089bf9555cf618695f35dc4a0694565c994c9ab972731123063f945aa09ff485df0df761d79c6a08ef
+  languageName: node
+  linkType: hard
+
 "emittery@npm:^0.13.1":
   version: 0.13.1
   resolution: "emittery@npm:0.13.1"