BoardCard

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

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

const pipeline: BoardColumnData<Candidate>[] = [
  {
    id: "applied",
    title: "Applied",
    items: [
      {
        id: "zara",
        name: "Zara Siddiqui",
        role: "Frontend engineer",
        detail: "Applied 3 days ago",
      },
      { id: "omar", name: "Omar Farooq", role: "Data analyst", detail: "Applied 5 days ago" },
      { id: "sana", name: "Sana Malik", role: "QA engineer", detail: "Applied 1 week ago" },
    ],
  },
  {
    id: "screening",
    title: "Screening",
    items: [
      {
        id: "bilal",
        name: "Bilal Ahmed",
        role: "Backend engineer",
        detail: "Phone screen on 08 Oct 2026",
      },
    ],
  },
  {
    id: "interview",
    title: "Interview",
    items: [
      {
        id: "hina",
        name: "Hina Baig",
        role: "Product designer",
        detail: "Panel 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={`board-${column.id}`}
            className="m-0 flex items-baseline justify-between px-1 text-heading-h4 text-primary"
          >
            {column.title}
            <span className="text-body-caption text-muted">{column.items.length}</span>
          </h3>
          <BoardColumn<Candidate> columnId={column.id} aria-labelledby={`board-${column.id}`}>
            {(card) => <BoardCard name={card.name} subtitle={card.role} detail={card.detail} />}
          </BoardColumn>
        </section>
      ))}
    </Board>
  );
}

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

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

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

const pipeline: BoardColumnData<Candidate>[] = [
  {
    id: "applied",
    title: "Applied",
    items: [
      {
        id: "zara",
        name: "Zara Siddiqui",
        role: "Frontend engineer",
        detail: "Applied 3 days ago",
      },
      { id: "omar", name: "Omar Farooq", role: "Data analyst", detail: "Applied 5 days ago" },
      { id: "sana", name: "Sana Malik", role: "QA engineer", detail: "Applied 1 week ago" },
    ],
  },
  {
    id: "screening",
    title: "Screening",
    items: [
      {
        id: "bilal",
        name: "Bilal Ahmed",
        role: "Backend engineer",
        detail: "Phone screen on 08 Oct 2026",
      },
    ],
  },
  {
    id: "interview",
    title: "Interview",
    items: [
      {
        id: "hina",
        name: "Hina Baig",
        role: "Product designer",
        detail: "Panel on 12 Oct 2026",
      },
    ],
  },
  { id: "offer", title: "Offer", items: [] },
];

function ShortlistDemo() {
  const [items, setItems] = useState(pipeline[0]?.items ?? []);
  return (
    <SortableList
      aria-label="Shortlist ranking"
      items={items}
      onReorder={setItems}
      className="max-w-[27.5rem]"
    >
      {(card) => <SortableItem label={card.name} meta={`${card.role}  ·  ${card.detail}`} />}
    </SortableList>
  );
}

export function SortableShortlist() {
  return <ShortlistDemo />;
}

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

export function LongContentAndAvatar() {
  return (
    <Board
      defaultColumns={[
        {
          id: "c",
          title: "Interview",
          items: [{ id: "a" }, { id: "b" }],
        },
      ]}
    >
      <BoardColumn columnId="c" className="w-60">
        {(item) =>
          item.id === "a" ? (
            <BoardCard
              name="Muhammad Abdullah Rehman Chaudhry"
              subtitle="Senior site reliability engineer, platform infrastructure"
              detail="Second interview on 14 Oct 2026 at 15:30 PKT"
            />
          ) : (
            <BoardCard
              name="Ayesha Khan"
              subtitle="People partner"
              detail="Applied today"
              avatar={
                <svg viewBox="0 0 28 28" className="size-full" aria-hidden="true" focusable="false">
                  <rect width="28" height="28" className="fill-status-leave-bg" />
                  <circle cx="14" cy="11" r="5" className="fill-status-leave-solid" />
                  <path d="M4 28c1-6 5-9 10-9s9 3 10 9z" className="fill-status-leave-solid" />
                </svg>
              }
            />
          )
        }
      </BoardColumn>
    </Board>
  );
}