1
 2import {
 3    type DropAnimation,
 4    type UniqueIdentifier,
 5    defaultDropAnimationSideEffects,
 6    DragOverlay,
 7} from "@dnd-kit/core";
 8import { SortableItem} from "./item";
 9
10const dropAnimationOpts: DropAnimation = {
11    sideEffects: defaultDropAnimationSideEffects({
12        styles: {
13            active: {
14                opacity: "0.4",
15            },
16        },
17    }),
18}
19interface SortableOverlayProps
20    extends React.ComponentPropsWithRef<typeof DragOverlay> {
21    activeId?: UniqueIdentifier | null
22}
23
24export function SortableOverlay({
25    activeId,
26    dropAnimation = dropAnimationOpts,
27    children,
28    ...props
29}: SortableOverlayProps) {
30    return (
31        <DragOverlay dropAnimation={dropAnimation} {...props}>
32            {activeId ? (
33                <SortableItem value={activeId} asChild>
34                    {children}
35                </SortableItem>
36            ) : null}
37        </DragOverlay>
38    )
39}
40