46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import React, { ReactNode } from "react";
|
|
import { useDroppable } from "@dnd-kit/core";
|
|
import {
|
|
SortableContext,
|
|
verticalListSortingStrategy,
|
|
} from "@dnd-kit/sortable";
|
|
import { Stack } from "@mantine/core";
|
|
import { BaseDraggable } from "@/components/dnd/types/types";
|
|
|
|
type Props<TItem> = {
|
|
id: string;
|
|
items: TItem[];
|
|
renderItem: (item: TItem) => ReactNode;
|
|
children?: ReactNode;
|
|
disabled?: boolean;
|
|
};
|
|
|
|
const FunnelColumn = <TItem extends BaseDraggable>({
|
|
id,
|
|
items,
|
|
renderItem,
|
|
children,
|
|
disabled = false,
|
|
}: Props<TItem>) => {
|
|
const { setNodeRef } = useDroppable({ id });
|
|
|
|
return (
|
|
<>
|
|
{children}
|
|
<SortableContext
|
|
disabled={disabled}
|
|
id={id}
|
|
items={items}
|
|
strategy={verticalListSortingStrategy}>
|
|
<Stack
|
|
gap="xs"
|
|
ref={setNodeRef}>
|
|
{items.map(renderItem)}
|
|
</Stack>
|
|
</SortableContext>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default FunnelColumn;
|