List Standard 1 - Draggable status list

"use client";

import type { DragEndEvent } from "@dnd-kit/core";
import * as React from "react";

import {
  ListGroup,
  ListHeader,
  ListItem,
  ListItems,
  ListProvider,
} from "@/components/kibo-ui/list";

export const title = "Draggable status list";

type Item = { id: string; name: string; parent: string };

const Example = () => {
  const [items, setItems] = React.useState<Item[]>([
    { id: "1", name: "Draft homepage", parent: "todo" },
    { id: "2", name: "Review pricing", parent: "todo" },
    { id: "3", name: "Update changelog", parent: "todo" },
  ]);

  const onDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;
    if (!over || active.id === over.id) return;

    setItems((current) => {
      const oldIndex = current.findIndex((item) => item.id === active.id);
      const newIndex = current.findIndex((item) => item.id === over.id);
      if (oldIndex < 0 || newIndex < 0) return current;
      const next = [...current];
      const [moved] = next.splice(oldIndex, 1);
      next.splice(newIndex, 0, moved);
      return next;
    });
  };

  return (
    <ListProvider className="w-full max-w-md" onDragEnd={onDragEnd}>
      <ListGroup id="todo">
        <ListHeader color="var(--chart-1)" name="Todo" />
        <ListItems>
          {items.map((item, index) => (
            <ListItem
              key={item.id}
              id={item.id}
              index={index}
              name={item.name}
              parent={item.parent}
            />
          ))}
        </ListItems>
      </ListGroup>
    </ListProvider>
  );
};

export default Example;