feat: raw deals dnd between statuses

src/app/deals/components/StatusColumn/StatusColumn.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from "react";
+import { useDroppable } from "@dnd-kit/core";
+import {
+    SortableContext,
+    verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { Box, Text } from "@mantine/core";
+import DealCard from "@/app/deals/components/DealCard/DealCard";
+import { SortableItem } from "@/components/SortableDnd/SortableItem";
+import { DealSchema } from "@/types/DealSchema";
+import { sortByLexorank } from "@/utils/lexorank";
+
+type BoardSectionProps = {
+    id: string;
+    title: string;
+    deals: DealSchema[];
+};
+
+const StatusColumn = ({ id, title, deals }: BoardSectionProps) => {
+    const { setNodeRef } = useDroppable({ id });
+    const [sortedDeals, setSortedDeals] = useState<DealSchema[]>([]);
+
+    useEffect(() => {
+        setSortedDeals(sortByLexorank(deals));
+    }, [deals]);
+
+    return (
+        <Box style={{ backgroundColor: "#eee", padding: 2 }}>
+            <Text>{title}</Text>
+            <SortableContext
+                id={id}
+                items={sortedDeals}
+                strategy={verticalListSortingStrategy}>
+                <div ref={setNodeRef}>
+                    {sortedDeals.map(deal => (
+                        <Box key={deal.id}>
+                            <SortableItem id={deal.id}>
+                                <DealCard deal={deal} />
+                            </SortableItem>
+                        </Box>
+                    ))}
+                </div>
+            </SortableContext>
+        </Box>
+    );
+};
+
+export default StatusColumn;