SortableItem

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

interface Task {
  id: string;
  title: string;
  meta: string;
  locked?: boolean;
}

const onboarding: Task[] = [
  { id: "contract", title: "Sign offer letter", meta: "Day 1  ·  HR", locked: true },
  { 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" },
  { id: "security", title: "Complete security awareness training", meta: "Week 1  ·  IT" },
];

function ChecklistDemo() {
  const [items, setItems] = useState(onboarding);
  return (
    <div className="flex max-w-[27.5rem] flex-col gap-2">
      <h3 id="checklist-title" className="m-0 text-heading-h4 text-primary">
        Your first week
      </h3>
      <SortableList aria-labelledby="checklist-title" items={items} onReorder={setItems}>
        {(task) => (
          <SortableItem label={task.title} meta={task.meta} isDisabled={task.locked === true} />
        )}
      </SortableList>
    </div>
  );
}

export function SortableChecklist() {
  return <ChecklistDemo />;
}

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

interface Candidate {
  id: string;
  name: string;
  role: string;
  applied: string;
}

const pipeline: BoardColumnData<Candidate>[] = [
  {
    id: "applied",
    title: "Applied",
    items: [
      {
        id: "zara",
        name: "Zara Siddiqui",
        role: "Frontend engineer",
        applied: "Applied 3 days ago",
      },
      { id: "omar", name: "Omar Farooq", role: "Data analyst", applied: "Applied 5 days ago" },
    ],
  },
  {
    id: "interview",
    title: "Interview",
    items: [
      {
        id: "hina",
        name: "Hina Baig",
        role: "Product designer",
        applied: "Interview on 12 Oct 2026",
      },
    ],
  },
  { id: "offer", title: "Offer", items: [] },
];

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

export function KanbanBoard() {
  return <KanbanDemo />;
}

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

export function LongLabels() {
  return (
    <SortableList
      aria-label="Policies"
      defaultItems={[
        {
          id: "handbook",
          title:
            "Read and sign the employee handbook, the code of conduct and the information security policy",
          meta: "Day 1  ·  HR  ·  Required before your first payroll run",
        },
        { id: "short", title: "Order business cards", meta: "Week 2  ·  Office" },
      ]}
      className="max-w-80"
    >
      {(task) => <SortableItem label={task.title} meta={task.meta} />}
    </SortableList>
  );
}