Chip Sortable

"use client";

import React, {useState} from "react";
import {ChipSortable, ChipSortableType, IconCheck} from "@brynlabs/fusion-ui";

const values: ChipSortableType[] = [
  {label: "JavaScript", icon: <IconCheck />},
  {label: "TypeScript", icon: <IconCheck />},
  {label: "React"},
  {label: "Vue"},
  {label: "Angular"},
  {label: "Node.js"},
  {label: "Express"},
  {label: "Next.js"},
  {label: "Svelte"},
  {label: "Python"},
  {label: "Java"},
  {label: "C++"},
  {label: "Go"},
  {label: "Rust"},
  {label: "PHP"},
  {label: "Ruby"},
];

export const ChipSortableExample = () => {
  const [chips, setChips] = useState(values);

  return (
    <>
      <ChipSortable
        title={"Sortable"}
        chips={chips}
        hasRemoveButtons={true}
        onChange={v => setChips(v)}
      />
      <div style={{marginTop: "50px"}}>Values: {chips.map(c => c.label).join(", ")}</div>
    </>
  );
};