feat: swiper

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

@@ -13,21 +13,11 @@
     }
 }
 
-.indicator {
-    height: 4px;
-    @mixin light {
-        background-color: lightgray;
-    }
+.swiper-scrollbar-drag {
     @mixin dark {
-        background-color: var(--mantine-color-dark-6);
+        color: var(--mantine-color-dark-7);
     }
-
-    &[data-active] {
-        @mixin light {
-            background-color: gray;
-        }
-        @mixin dark {
-            background-color: var(--mantine-color-dark-5);
-        }
+    @mixin light {
+        color: var(--color-light-whitesmoke);
     }
 }

src/components/dnd/FunnelDnd/FunnelDnd.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { ReactNode } from "react";
+import React, { ReactNode, RefObject } from "react";
 import {
     closestCorners,
     DndContext,
@@ -12,8 +12,8 @@ import {
     horizontalListSortingStrategy,
     SortableContext,
 } from "@dnd-kit/sortable";
-import { Carousel } from "@mantine/carousel";
-import { Group } from "@mantine/core";
+import { FreeMode, Mousewheel, Pagination, Scrollbar } from "swiper/modules";
+import { Swiper, SwiperRef, SwiperSlide } from "swiper/react";
 import CreateStatusButton from "@/app/deals/components/shared/CreateStatusButton/CreateStatusButton";
 import useDndSensors from "@/app/deals/hooks/useSensors";
 import FunnelColumn from "@/components/dnd/FunnelDnd/FunnelColumn";
@@ -21,7 +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";
+import "./FunnelDnd.module.css";
 
 type Props<TContainer, TItem> = {
     containers: TContainer[];
@@ -29,6 +29,7 @@ type Props<TContainer, TItem> = {
     onDragStart: (event: DragStartEvent) => void;
     onDragOver: (event: DragOverEvent) => void;
     onDragEnd: (event: DragEndEvent) => void;
+    swiperRef: RefObject<SwiperRef | null>;
     renderContainer: (container: TContainer, children: ReactNode) => ReactNode;
     renderContainerOverlay: (
         container: TContainer,
@@ -53,6 +54,7 @@ const FunnelDnd = <
     onDragStart,
     onDragOver,
     onDragEnd,
+    swiperRef,
     renderContainer,
     renderContainerOverlay,
     renderItem,
@@ -71,54 +73,81 @@ const FunnelDnd = <
         containers.map(container => {
             const containerItems = getItemsByContainer(container, items);
             const containerId = getContainerId(container);
-            const item = (
-                <SortableItem
-                    key={containerId}
-                    id={containerId}
-                    disabled={disabledColumns}
-                    renderItem={() =>
-                        renderContainer(
-                            container,
-                            <FunnelColumn
-                                id={containerId}
-                                items={containerItems}
-                                renderItem={renderItem}
-                            />
-                        )
-                    }
-                />
+            return (
+                <SwiperSlide key={containerId}>
+                    <SortableItem
+                        key={containerId}
+                        id={containerId}
+                        disabled={disabledColumns}
+                        renderItem={() =>
+                            renderContainer(
+                                container,
+                                <FunnelColumn
+                                    id={containerId}
+                                    items={containerItems}
+                                    renderItem={renderItem}
+                                />
+                            )
+                        }
+                    />
+                </SwiperSlide>
             );
-            if (!isMobile) return item;
-            return <Carousel.Slide key={containerId}>{item}</Carousel.Slide>;
         });
 
     const renderBody = () => {
         if (isMobile) {
             return (
-                <Carousel
-                    slideSize={"90%"}
-                    slideGap={"md"}
-                    pb={"xl"}
-                    withControls={false}
-                    withIndicators
-                    styles={{
-                        container: {
-                            marginInline: "10vw",
-                        },
-                    }}
-                    classNames={styles}>
+                <Swiper
+                    ref={swiperRef}
+                    slidesPerView={1.2}
+                    modules={[Pagination]}
+                    freeMode={{ enabled: false }}
+                    pagination={{ enabled: true, clickable: true }}>
                     {renderContainers()}
-                    {isCreatingContainerEnabled && <CreateStatusButton />}
-                </Carousel>
+                    {isCreatingContainerEnabled && (
+                        <SwiperSlide>
+                            <CreateStatusButton />
+                        </SwiperSlide>
+                    )}
+                </Swiper>
             );
         }
         return (
-            <Group
-                gap={"xs"}
-                wrap="nowrap"
-                align="start">
+            <Swiper
+                ref={swiperRef}
+                modules={[Scrollbar, Mousewheel, FreeMode]}
+                breakpoints={{
+                    650: {
+                        slidesPerView: 4,
+                        spaceBetween: 15,
+                    },
+                    850: {
+                        slidesPerView: 5.5,
+                        spaceBetween: 20,
+                    },
+                    1024: {
+                        slidesPerView: 6.5,
+                        spaceBetween: 25,
+                    },
+                }}
+                scrollbar={{
+                    hide: false,
+                }}
+                mousewheel={{
+                    enabled: true,
+                    sensitivity: 0.2,
+                }}
+                freeMode={{
+                    enabled: true,
+                }}
+                grabCursor>
                 {renderContainers()}
-            </Group>
+                {isCreatingContainerEnabled && (
+                    <SwiperSlide>
+                        <CreateStatusButton />
+                    </SwiperSlide>
+                )}
+            </Swiper>
         );
     };