"use client"; import { DndContext, type DragEndEvent, rectIntersection, useDraggable, useDroppable, } from "@dnd-kit/core"; import { restrictToVerticalAxis } from "@dnd-kit/modifiers"; import type { ReactNode } from "react"; import { cn } from "@/lib/utils"; export type { DragEndEvent } from "@dnd-kit/core"; type Status = { id: string; name: string; color: string; }; type Feature = { id: string; name: string; startAt: Date; endAt: Date; status: Status; }; export type ListItemsProps = { children: ReactNode; className?: string; }; export const ListItems = ({ children, className }: ListItemsProps) => (

{children}

); export type ListHeaderProps = | { children: ReactNode; } | { name: Status["name"]; color: Status["color"]; className?: string; }; export const ListHeader = (props: ListHeaderProps) => "children" in props ? ( props.children ) : (

{props.name}

); export type ListGroupProps = { id: Status["id"]; children: ReactNode; className?: string; }; export const ListGroup = ({ id, children, className }: ListGroupProps) => { const { setNodeRef, isOver } = useDroppable({ id }); return (

{children}

); }; export type ListItemProps = Pick & { readonly index: number; readonly parent: string; readonly children?: ReactNode; readonly className?: string; }; export const ListItem = ({ id, name, index, parent, children, className, }: ListItemProps) => { const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({ id, data: { index, parent }, }); return (

{children ??

{name}

}

); }; export type ListProviderProps = { children: ReactNode; onDragEnd: (event: DragEndEvent) => void; className?: string; }; export const ListProvider = ({ children, onDragEnd, className, }: ListProviderProps) => (

{children}

);

list

Instalação

Dependências