feat: swiper

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

@@ -1,8 +1,6 @@
 "use client";
 
 import React, { FC, ReactNode } from "react";
-import { Group, ScrollArea } from "@mantine/core";
-import CreateStatusButton from "@/app/deals/components/shared/CreateStatusButton/CreateStatusButton";
 import DealCard from "@/app/deals/components/shared/DealCard/DealCard";
 import DealContainer from "@/app/deals/components/shared/DealContainer/DealContainer";
 import StatusColumnWrapper from "@/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper";
@@ -26,15 +24,17 @@ const Funnel: FC = () => {
         handleDragEnd,
         activeStatus,
         activeDeal,
+        swiperRef,
     } = useDealsAndStatusesDnd();
 
-    const renderFunnelDnd = () => (
+    return (
         <FunnelDnd
             containers={sortedStatuses}
             items={deals}
             onDragStart={handleDragStart}
             onDragOver={handleDragOver}
             onDragEnd={handleDragEnd}
+            swiperRef={swiperRef}
             getContainerId={(status: StatusSchema) => `${status.id}-status`}
             getItemsByContainer={(status: StatusSchema, items: DealSchema[]) =>
                 sortByLexorank(
@@ -71,22 +71,6 @@ const Funnel: FC = () => {
             isCreatingContainerEnabled={!!selectedBoard}
         />
     );
-
-    if (isMobile) return renderFunnelDnd();
-
-    return (
-        <ScrollArea
-            offsetScrollbars={"x"}
-            scrollbarSize={"0.5rem"}>
-            <Group
-                align={"start"}
-                wrap={"nowrap"}
-                gap={"xs"}>
-                {renderFunnelDnd()}
-                {selectedBoard && <CreateStatusButton />}
-            </Group>
-        </ScrollArea>
-    );
 };
 
 export default Funnel;