// src/components/ui/DragList.tsx "use client"; import { useState, type ReactNode } from "react"; import { GripVertical, ArrowUp, ArrowDown, X } from "lucide-react"; import { cx } from "@/lib/cx"; export interface DragListItem { id: string; content: ReactNode; } export interface DragListProps { items: DragListItem[]; onReorder: (ids: string[]) => void; onRemove?: (id: string) => void; "aria-label": string; } /** Reorderable list: pointer drag on the grip, arrow buttons for keyboard — * order changes are announced via the buttons' aria-labels, never drag-only. */ export default function DragList({ items, onReorder, onRemove, ...rest }: DragListProps) { const [dragId, setDragId] = useState(null); const move = (id: string, delta: number) => { const ids = items.map((i) => i.id); const from = ids.indexOf(id); const to = from + delta; if (to < 0 || to >= ids.length) return; ids.splice(from, 1); ids.splice(to, 0, id); onReorder(ids); }; const onDropOn = (targetId: string) => { if (!dragId || dragId === targetId) return; const ids = items.map((i) => i.id); const from = ids.indexOf(dragId); const to = ids.indexOf(targetId); ids.splice(from, 1); ids.splice(to, 0, dragId); onReorder(ids); setDragId(null); }; return (

setDragId(item.id)} onDragEnd={() => setDragId(null)} onDragOver={(e) => e.preventDefault()} onDrop={() => onDropOn(item.id)} >
{item.content}
{onRemove && ( )}

); }