1
2const DragHandler = (props) => (
3  <div
4    {...props}
5    className=" flex justify-center items-center h-8 w-8 rounded border m-4 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 hover:bg-blue-500 hover:text-white duration-300"
6  >
7    <div className="" title="drag handler">
8      <svg
9        xmlns="http://www.w3.org/2000/svg"
10        fill="none"
11        viewBox="0 0 24 24"
12        strokeWidth={1.5}
13        stroke="currentColor"
14        className="w-6 h-6"
15      >
16        <path
17          strokeLinecap="round"
18          strokeLinejoin="round"
19          d="M3 7.5L7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5"
20        />
21      </svg>
22    </div>
23  </div>
24);
25
26export const DragHandleExample: React.VFC = () => {
27  const [items, setItems] = useState<SortableItemProps[]>([
28    { id: '1', name: 'Item 1' },
29    { id: '2', name: 'Item 2' },
30    { id: '3', name: 'Item 3' },
31  ]);
32
33  return (
34    <SortableList items={items} setItems={setItems}>
35      {({ items }: { items: SortableItemProps[] }) => (
36        <div className="space-y-4">
37          {items.map((item: SortableItemProps) => (
38            <SortableItem
39              key={item.id}
40              id={item.id}
41              DragHandler={DragHandler}
42              className="flex border items-center w-40"
43            >
44              <div>{item.name}</div>
45            </SortableItem>
46          ))}
47        </div>
48      )}
49    </SortableList>
50  );
51};
52

1export const HorizontalExample: React.VFC = () => {
2  const [items, setItems] = useState<SortableItemProps[]>([
3    { id: '1', name: 'Item 1' },
4    { id: '2', name: 'Item 2' },
5    { id: '3', name: 'Item 3' },
6  ]);
7  return (
8    <div className="flex space-x-4">
9      <SortableList
10        items={items}
11        setItems={setItems}
12        itemRender={({ item }: ItemRenderProps) => <Item name={item.name} />}
13        horizontal
14      />
15    </div>
16  );
17};
18