Sortable List

Copyimport {
  SortableList,
  SortableItem,
  SortableDragHandle,
} from "@/components/ui/sortable-list";

Copy"use client";
 
import { useState } from "react";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemTitle,
} from "@/components/ui/item";
import {
  SortableList,
  SortableItem,
  SortableDragHandle,
} from "@/components/ui/sortable-list";
 
const initialItems = [
  {
    id: "1",
    title: "Item 1",
    description: "Description for item 1",
  },
  {
    id: "2",
    title: "Item 2",
    description: "Description for item 2",
  },
  {
    id: "3",
    title: "Item 3",
    description: "Description for item 3",
  },
];
 
export function SortableListDemo() {
  const [items, setItems] = useState(initialItems);
 
  return (
    <SortableList
      className="w-full gap-1"
      items={items}
      onChange={setItems}
      renderItem={(item) => (
        <SortableItem id={item.id}>
          <Item className="w-full border-border" size="sm" variant="muted">
            <ItemActions>
              <SortableDragHandle />
            </ItemActions>
            <ItemContent>
              <ItemTitle>{item.title}</ItemTitle>
              <ItemDescription>{item.description}</ItemDescription>
            </ItemContent>
          </Item>
        </SortableItem>
      )}
    />
  );
}