Sort (create time by default, and draggable)

[aahei]

import { useState } from "react";
import { closestCenter, DndContext } from "@dnd-kit/core";
import {
    arrayMove,
    SortableContext,
    useSortable,
    verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";

const data = [
    // 数据样本
    {
        id: 1,
        name: "Samaria",
    },
    {
        id: 2,
        name: "Gauthier",
    },
    {
        id: 3,
        name: "Mellisa",
    },
    {
        id: 4,
        name: "Arabela",
    },
    {
        id: 5,
        name: "Devon",
    },
    {
        id: 6,
        name: "Stacee",
    },
    {
        id: 7,
        name: "Federica",
    },
    {
        id: 8,
        name: "Jecho",
    },
    {
        id: 9,
        name: "Alasteir",
    },
    {
        id: 10,
        name: "Elston",
    },
];

const SortableItem = ({ user }) => {
    //每一行的小Item，可以用改用:
    // <ul><li></li></ul>
    //结构，也可以使用其他制表方法

    const {
        attributes,
        listeners,
        setNodeRef,
        transform,
        transition,
    } = useSortable({ id: user.id });

    const style = {
        transition,
        transform: CSS.Transform.toString(transform),
        // 以下CSS都可以更改
        padding: "10px",
        border: "1px solid black",
        fontSize: "18px",
        width: "400px",
    };

    return (
        <div
            ref={setNodeRef}
            style={style}
            {...attributes}
            {...listeners}
            className="user"
        >
            {user.name}
        </div>
    );
};

const SortedListDnd = () => {
    //Draggable Item的Container

    const [users, setUsers] = useState(data);

    const onDragEnd = (event) => {
        const { active, over } = event;
        if (active.id === over.id) {
            return;
        }
        setUsers((users) => {
            const oldIndex = users.findIndex((user) => user.id === active.id);
            const newIndex = users.findIndex((user) => user.id === over.id);
            return arrayMove(users, oldIndex, newIndex);
        });
    };

    const style = {
        // 以下CSS都可以更改
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
    };

    return (
        <div className="users" style={style}>
            <div>
                <DndContext collisionDetection={closestCenter} onDragEnd={onDragEnd}>
                    <SortableContext items={users} strategy={verticalListSortingStrategy}>
                        {users.map((user) => (
                            <SortableItem key={user.id} user={user} />
                        ))}
                    </SortableContext>
                </DndContext>
            </div>
        </div>
    );
};
export default SortedListDnd;