Reorderable List

1"use client"
2 
3import * as React from "react"
4import {
5  DndContext,
6  closestCenter,
7  KeyboardSensor,
8  PointerSensor,
9  useSensor,
10  useSensors,
11  DragOverlay,
12  type DragStartEvent,
13  type DragEndEvent,
14} from "@dnd-kit/core"
15import {
16  arrayMove,
17  SortableContext,
18  sortableKeyboardCoordinates,
19  useSortable,
20  verticalListSortingStrategy,
21} from "@dnd-kit/sortable"
22import { CSS } from "@dnd-kit/utilities"
23import { motion } from "motion/react"
24import { cn } from "@/lib/utils"
25 
26const EASE_OUT_QUART: [number, number, number, number] = [0.25, 1, 0.5, 1]
27 
28interface ReorderableListProps<T extends { id: string | number }> {
29  items: T[]
30  onReorder: (items: T[]) => void
31  renderItem: (item: T, index: number) => React.ReactNode
32  className?: string
33  itemClassName?: string
34  gap?: number
35  dragTarget?: "card" | "handle"
36}
37 
38interface SortableItemProps {
39  id: string | number
40  children: React.ReactNode
41  className?: string
42  isDragOverlay?: boolean
43  activeId: string | number | null
44  dragTarget: "card" | "handle"
45}
46 
47function SortableItem({
48  id,
49  children,
50  className,
51  isDragOverlay,
52  activeId,
53  dragTarget,
54}: SortableItemProps) {
55  const {
56    attributes,
57    listeners,
58    setNodeRef,
59    transform,
60    transition,
61    isDragging,
62  } = useSortable({ id })
63 
64  const style: React.CSSProperties = {
65    transform: CSS.Transform.toString(transform),
66    transition,
67  }
68 
69  const overlayStyle: React.CSSProperties = isDragOverlay
70    ? {
71        boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
72        transform: "scale(1.02)",
73      }
74    : {}
75 
76  const dragProps = dragTarget === "card" ? { ...attributes, ...listeners } : {}
77 
78  return (
79    <motion.div
80      ref={isDragOverlay ? undefined : setNodeRef}
81      style={{ ...style, ...overlayStyle }}
82      className={cn(
83        "touch-none",
84        dragTarget === "card" && "cursor-grab active:cursor-grabbing",
85        isDragOverlay && "cursor-grabbing",
86        isDragging && "opacity-40",
87        className
88      )}
89      layout={!isDragOverlay}
90      transition={{ duration: 0.3, ease: EASE_OUT_QUART }}
91      {...dragProps}
92    >
93      {dragTarget === "handle" ? (
94        <ReorderableListHandleContext.Provider
95          value={{ attributes, listeners }}
96        >
97          {children}
98        </ReorderableListHandleContext.Provider>
99      ) : (
100        children
101      )}
102    </motion.div>
103  )
104}
105 
106// Context for drag handle
107// eslint-disable-next-line @typescript-eslint/no-explicit-any
108// … truncated