components/CapabilityRow.tsx

import { Method, Support } from "@/lib/data";

function Mark({ value }: { value: Support }) {
  if (value === "yes") return <span className="h-[9px] w-[9px] rounded-full bg-forest" />;
  if (value === "partial")
    return <span className="h-[9px] w-[9px] rounded-full shadow-[inset_0_0_0_1.5px_#c08532]" />;
  if (value === "unknown") return <span className="font-mono text-[13px] text-smoke">?</span>;
  return <span className="h-[1.5px] w-[11px] bg-ash" />;
}

export default function CapabilityRow({ method }: { method: Method }) {
  const allFour =
    method.onTheFly &&
    method.compile === "yes" &&
    method.peft === "yes" &&
    method.serializable === "yes";

  return (
    <div className="flex items-center gap-6 border-b border-hairline px-3 py-[18px]">
      <div className="flex w-[420px] shrink-0 flex-col gap-1">
        <div className="flex items-center gap-2.5">
          <a href={method.docs} target="_blank" rel="noreferrer"
            className="font-mono text-[15px] font-medium text-obsidian hover:text-forest">
            {method.name}
          </a>
          {allFour && (
            <span className="label rounded-md px-2 py-0.5 text-[10px] text-forest shadow-[0_0_0_1px_#34785c]">
              All four
            </span>
          )}
        </div>
        <p className="text-[13px] text-charcoal">{method.blurb}</p>
        <code className="font-mono text-[11px] text-stone">{method.config}</code>
      </div>
      {[method.onTheFly ? "yes" : "no", method.compile, method.peft, method.serializable].map(
        (v, i) => (
          <div key={i} className="flex w-[140px] shrink-0 justify-center">
            <Mark value={v as Support} />
          </div>
        ),
      )}
    </div>
  );
}