gitfor/platform

import { useState } from "react";
import { addProjectField, addProjectItem, deleteProjectField } from "~/fns/projects";
import { useAction } from "~/hooks/use-action";
import type { ProjectData } from "./ItemTitle";
import { Button } from "../ui/Button";
import { inputClass } from "../ui/Field";
import { cn } from "~/utils/cn";

const KINDS = [
  { value: "text", label: "Text" },
  { value: "number", label: "Number" },
  { value: "date", label: "Date" },
  { value: "single_select", label: "Single select" },
] as const;

type Kind = (typeof KINDS)[number]["value"];

function isKind(value: string): value is Kind {
  return KINDS.some((kind) => kind.value === value);
}

function FieldEditor({ data }: { data: ProjectData }) {
  const add = useAction(addProjectField);
  const remove = useAction(deleteProjectField);
  const [kind, setKind] = useState<Kind>("text");
  const ref = { owner: data.project.owner, number: data.project.number };
  return (
    <div className="space-y-3 rounded-md border border-gray-800 p-3">
      <ul className="flex flex-wrap gap-2">
        {data.fields.map((field) => (
          <li
            key={field.id}
            className="flex items-center gap-1 rounded-full border border-gray-700 px-2 py-0.5 text-xs"
          >
            {field.name} <span className="text-gray-600">{field.kind.replace("_", " ")}</span>
            <button
              type="button"
              aria-label={`Delete field ${field.name}`}
              className="text-gray-600 hover:text-red-400"
              onClick={() =>