App.jsximport { useState } from 'react';
import { useReorder } from '@kkwaenggwari/animated';
import './styles.css';
const initial = [
{ id: 'brief', title: 'Write the brief', tag: 'Plan' },
{ id: 'sketch', title: 'Sketch three layouts', tag: 'Design' },
{ id: 'motion', title: 'Prototype the motion', tag: 'Design' },
{ id: 'review', title: 'Review with the team', tag: 'Team' },
{ id: 'ship', title: 'Ship it', tag: 'Launch' },
];
export default function App({ stiffness = 380, damping = 32 }) {
const [tasks, setTasks] = useState(initial);
const list = useReorder(tasks, setTasks, {
key: (task) => task.id,
tempo: { spring: { stiffness, damping } },
});
return (
<div className="stage">
<ol className="tasks">
{tasks.map((task, index) => (
<li key={task.id} ref={list.ref(task)} tabIndex={0}>
<span className="index">{index + 1}</span>
<span className="title">{task.title}</span>
<span className="tag">{task.tag}</span>
</li>
))}
</ol>
<p>Drag a row, or focus it and use the arrow keys.</p>
</div>
);
}
