DropIndicator

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: "payroll", title: "Add bank details for payroll", meta: "Day 1  ·  Finance" },
  { 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 Card {
  id: string;
  name: string;
  role: string;
}

const columns: BoardColumnData<Card>[] = [
  {
    id: "applied",
    title: "Applied",
    items: [
      { id: "zara", name: "Zara Siddiqui", role: "Frontend engineer" },
      { id: "omar", name: "Omar Farooq", role: "Data analyst" },
    ],
  },
  {
    id: "interview",
    title: "Interview",
    items: [{ id: "hina", name: "Hina Baig", role: "Product designer" }],
  },
];

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={`drop-${column.id}`} className="m-0 px-1 text-heading-h4 text-primary">
            {column.title}
          </h3>
          <BoardColumn<Card> columnId={column.id} aria-labelledby={`drop-${column.id}`}>
            {(card) => <BoardCard name={card.name} subtitle={card.role} />}
          </BoardColumn>
        </section>
      ))}
    </Board>
  );
}

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