DragHandle

import { useState } from "react";
import { SortableItem, SortableList } from "@nexera-ui/react";

const steps = [
  { id: "offer", title: "Sign offer letter", meta: "Day 1  ·  HR" },
  { id: "laptop", title: "Collect laptop and badge", meta: "Day 1  ·  IT" },
  { id: "buddy", title: "Coffee with your onboarding buddy", meta: "Day 2  ·  Team" },
];

function ListDemo() {
  const [items, setItems] = useState(steps);
  return (
    <SortableList
      aria-label="Onboarding checklist"
      items={items}
      onReorder={setItems}
      className="max-w-[27.5rem]"
    >
      {(step) => <SortableItem label={step.title} meta={step.meta} />}
    </SortableList>
  );
}

export function InSortableList() {
  return <ListDemo />;
}

import { useState } from "react";
import { Board, BoardCard, BoardColumn } from "@nexera-ui/react";

interface Reviewee {
  id: string;
  name: string;
  role: string;
}

const columns: BoardColumnData<Reviewee>[] = [
  {
    id: "todo",
    title: "To review",
    items: [
      { id: "zara", name: "Zara Siddiqui", role: "Frontend engineer" },
      { id: "omar", name: "Omar Farooq", role: "Data analyst" },
    ],
  },
  { id: "done", title: "Reviewed", items: [] },
];

function BoardDemo() {
  const [value, setValue] = useState(columns);
  return (
    <Board columns={value} onColumnsChange={setValue}>
      {value.map((column) => (
        <section key={column.id} className="flex w-60 flex-col gap-2 rounded-lg bg-sunken p-2">
          <h3 id={`handle-${column.id}`} className="m-0 px-1 text-heading-h4 text-primary">
            {column.title}
          </h3>
          <BoardColumn<Reviewee> columnId={column.id} aria-labelledby={`handle-${column.id}`}>
            {(card) => <BoardCard name={card.name} subtitle={card.role} />}
          </BoardColumn>
        </section>
      ))}
    </Board>
  );
}

export function InKanbanBoard() {
  return <BoardDemo />;
}