<Droppable
id="status-list"
accepts={["status"]}
onDrop={handleDrop}
class="space-y-3 min-h-32 p-3 border-2 border-dashed border-muted rounded"
>
<For each={reorderedStatuses()}>
{(status, index) => (
<Draggable
item={{
id: status.id.toString(),
type: "status",
data: status,
index: index(),
container: "status-list",
}}
disabled={isLocked(status)}
class="flex items-center gap-3 p-3 border border-border rounded"
onDropOnItem={handleDrop}
>
<Show
when={!isLocked(status)}
fallback={
<LockIcon class="w-4 h-4 text-muted-foreground" />
}
>
<GripVerticalIcon class="w-4 h-4 text-muted-foreground" />
</Show>
<span>{status.name} </span>
</Draggable>
)}
</For>
</Droppable>
<Droppable
id="status-list"
accepts={["status"]}
onDrop={handleDrop}
class="space-y-3 min-h-32 p-3 border-2 border-dashed border-muted rounded"
>
<For each={reorderedStatuses()}>
{(status, index) => (
<Draggable
item={{
id: status.id.toString(),
type: "status",
data: status,
index: index(),
container: "status-list",
}}
disabled={isLocked(status)}
class="flex items-center gap-3 p-3 border border-border rounded"
onDropOnItem={handleDrop}
>
<Show
when={!isLocked(status)}
fallback={
<LockIcon class="w-4 h-4 text-muted-foreground" />
}
>
<GripVerticalIcon class="w-4 h-4 text-muted-foreground" />
</Show>
<span>{status.name} </span>
</Draggable>
)}
</For>
</Droppable>