Column map

"use client";
import * as React from "react";
import { ColumnMap } from "@/components/ui/notchset/blocks/column-map";

const HEAD = ["Title", "Owner", "Due", "Area"];
const FIRST = ["Show a van's remaining capacity", "Tomás", "2026-11-04", "Routing"];
const TARGETS = [
  { value: "title", label: "Title" },
  { value: "assignee", label: "Assignee" },
  { value: "due", label: "Due date" },
  { value: "labels", label: "Labels" },
];

export default function ColumnMapDemo() {
  /* the first mapping is the host's guess from the headers; Area matched nothing, so it is left out */
  const [map, setMap] = React.useState(["title", "assignee", "due", "skip"]);
  return (
    <div className="w-full max-w-[560px]">
      <ColumnMap columns={HEAD.map((name, i) => ({ name, sample: FIRST[i] }))} value={map} options={TARGETS} onValueChange={setMap} />
    </div>
  );
}