Drag to reorder

import { useState } from 'react';
import { Reorder } from 'motion/react';

// How quickly the other rows slide aside to make room.
const SLIDE = { type: 'spring', stiffness: 500, damping: 40 } as const;
const LIFTED = { scale: 1.04, boxShadow: '0 12px 24px -8px rgb(0 0 0 / 0.25)' };

type TaskListProps = { initial: string[]; onSave: (tasks: string[]) => void };

export function TaskList({ initial, onSave }: TaskListProps) {
  const [tasks, setTasks] = useState(initial);

  // Move up and Move down: the keyboard and screen reader alternative.
  function move(task: string, offset: -1 | 1) {
    const next = tasks.filter((t) => t !== task);
    next.splice(tasks.indexOf(task) + offset, 0, task);
    setTasks(next);
    onSave(next);
  }

  return (
    <Reorder.Group
      axis='y'
      values={tasks}
      onReorder={setTasks}
      className='flex w-80 flex-col gap-2'
    >
      {tasks.map((task, index) => (
        <Reorder.Item
          key={task}
          value={task}
          transition={SLIDE}
          whileDrag={LIFTED}
          onDragEnd={() => onSave(tasks)} // save as soon as the row drops
          className='flex cursor-grab items-center gap-2 rounded-xl border bg-background px-3 py-2.5 text-sm active:cursor-grabbing'
        >
          <span className='flex-1'>{task}</span>
          {([-1, 1] as const).map((offset) => (
            <button
              key={offset}
              type='button'
              disabled={!tasks[index + offset]}
              onClick={() => move(task, offset)}
              aria-label={`Move ${task} ${offset < 0 ? 'up' : 'down'}`}
              className='rounded px-1.5 text-muted-foreground hover:bg-muted disabled:opacity-30'
            >
              {offset < 0 ? '↑' : '↓'}
            </button>
          ))}
        </Reorder.Item>
      ))}
    </Reorder.Group>
  );
}