"use client"import { useState } from "react"import {  ListGroup,  ListHeader,  ListItem,  ListItems,  ListProvider,  type DragEndEvent,} from "@/components/kibo-ui/list/index"export default function ListDemo() {  const [items, setItems] = useState([    { id: "task-1", name: "Design dashboard", parent: "todo" },    { id: "task-2", name: "Review pull request", parent: "todo" },    { id: "task-3", name: "Set up analytics", parent: "done" },  ])  const handleDragEnd = ({ active, over }: DragEndEvent) => {    if (!over || active.id === over.id) return    setItems((current) =>      current.map((item) =>        item.id === active.id ? { ...item, parent: String(over.id) } : item      )    )  }  return (    <ListProvider onDragEnd={handleDragEnd} className="min-h-80 w-full max-w-lg">      <div className="grid grid-cols-2 gap-4">        <ListGroup id="todo">          <ListHeader name="To do" color="#f59e0b" />          <ListItems>            {items              .filter((item) => item.parent === "todo")              .map((item, index) => (                <ListItem                  key={item.id}                  id={item.id}                  name={item.name}                  index={index}                  parent={item.parent}                />              ))}          </ListItems>        </ListGroup>        <ListGroup id="done">          <ListHeader name="Done" color="#22c55e" />          <ListItems>            {items              .filter((item) => item.parent === "done")              .map((item, index) => (                <ListItem                  key={item.id}                  id={item.id}                  name={item.name}                  index={index}                  parent={item.parent}                />              ))}          </ListItems>        </ListGroup>      </div>    </ListProvider>  )}