import Sortable from "solid-sortablejs";
import {createStore} from "solid-js/store";
import { JSX } from "solid-js";

const App = () => {
  const itemStyles: JSX.CSSProperties = {"user-select": "none", background: "green", padding: "10px", "min-width": "100px", margin: "5px", "border-radius": "4px", color: "white"};
  const containerStyles = {display: "inline-block", background: "gray", padding: "10px", "border-radius": "4px"};

  const [items, setItems] = createStore([
    { id: 0, name: 0 },
    { id: 1, name: 1 },
    { id: 2, name: 2 },
    { id: 3, name: 3 },
  ])

  return (
    <div style={containerStyles}>
      <Sortable idField="id" items={items} setItems={setItems} >
        {item => <div style={itemStyles}>{item.name} {Math.random()}</div>}
      </Sortable>
    </div>
  );
};