Reorderable list

"use client"

import * as React from "react"
import { ReorderableList, type ReorderableGroup } from "@/components/candor/reorderable-list"

type Check = { id: string; name: string; owner: string }

const checks: Check[] = [
  { id: "lint", name: "Lint", owner: "Build agent" },
  { id: "types", name: "Type check", owner: "Build agent" },
  { id: "unit", name: "Unit tests", owner: "Test agent" },
  { id: "e2e", name: "End-to-end tests", owner: "Test agent" },
]

/** One list: the order the checks run in. Drag a handle, or press Space on it and use the arrow keys, or use the menu. */
function Order() {
  const [items, setItems] = React.useState(checks)
  return (
    <ReorderableList
      label="Checks, in the order they run"
      items={items}
      keyOf={(c) => c.id}
      labelOf={(c) => c.name}
      onReorder={setItems}
      renderItem={(c, { index }) => (
        <div className="flex items-baseline gap-2 px-1 text-sm">
          <span className="w-4 text-xs tabular-nums text-muted-foreground">{index + 1}</span>
          <span className="font-medium">{c.name}</span>
          <span className="ms-auto text-xs text-muted-foreground">{c.owner}</span>
        </div>
      )}
      className="max-w-md"
    />
  )
}

/**
 * Groups: checks move between Required and Optional, with the left and right arrow keys or the menu. Each heading shows
 * its count, and a group folds to its heading; a folded group can still be moved into from the menu.
 */
function Groups() {
  const [collapsed, setCollapsed] = React.useState<string[]>([])
  const [groups, setGroups] = React.useState<ReorderableGroup<Check>[]>([
    { id: "required", label: "Required before merge", items: checks.slice(0, 3) },
    { id: "optional", label: "Optional", items: checks.slice(3) },
  ])
  const move = (key: string, to: string, index: number) =>
    setGroups((all) => {
      const item = all.flatMap((g) => g.items).find((c) => c.id === key)
      if (!item) return all
      return all.map((g) => {
        const rest = g.items.filter((c) => c.id !== key)
        return g.id === to ? { ...g, items: [...rest.slice(0, index), item, ...rest.slice(index)] } : { ...g, items: rest }
      })
    })
  return (
    <ReorderableList
      label="Merge checks"
      items={[]}
      groups={groups}
      keyOf={(c) => c.id}
      labelOf={(c) => c.name}
      onReorder={() => {}}
      onMove={move}
      groupHeader={(g, { count }) => (
        <span className="flex items-baseline gap-1.5">
          {g.label}
          <span className="tabular-nums text-faint-foreground">{count}</span>
        </span>
      )}
      collapsed={collapsed}
      onCollapsedChange={setCollapsed}
      renderItem={(c) => <span className="px-1 text-sm">{c.name}</span>}
      className="max-w-xl"
    />
  )
}

export default function Example() {
  return (
    <div className="flex flex-col gap-8">
      <Order />
      <Groups />
    </div>
  )
}