Function RelatedValuesGroupItem

app/components/RelatedValues.tsx:62–113

({
  group,
  isOpen,
  toggleOpen,
}: {
  group: RelatedValuesGroup;
  isOpen: boolean;
  toggleOpen: () => void;
})

}

function RelatedValuesGroupItem({
  group,
  isOpen,
  toggleOpen,
}: {
  group: RelatedValuesGroup;
  isOpen: boolean;
  toggleOpen: () => void;
}) {
  const isLinkable = group.value !== "undefined";
  const isHighlighted = group.value === "undefined" || group.value === "null";

  return (
    <div className="mb-1 transition dark:text-slate-300">
      <div
        className={`flex rounded-sm transition hover:cursor-pointer ${
          isOpen
            ? "bg-slate-200 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-700"
            : "bg-slate-100 hover:bg-slate-200 dark:bg-slate-600 dark:hover:bg-slate-700"
        }`}
        onClick={() => toggleOpen()}
      >
        <div className="flex items-center rounded-sm px-1 bg-slate-200 dark:bg-slate-700">
          {isOpen ? (
            <ChevronDownIcon className="w-3 h-3" />
          ) : (
            <ChevronRightIcon className="w-3 h-3" />
          )}
          <SmallBody className="ml-1">{group.paths.length}</SmallBody>
        </div>
        <Mono
          className={`truncate px-2 text-slate-700 dark:text-slate-200 ${
            isHighlighted ? "italic" : ""
          }`}
        >
          {group.value}
        </Mono>
      </div>
      {isOpen &&
        group.paths.map((path) => {
          return (
            <div
              className="p-0.5 bg-slate-100 dark:bg-slate-700 dark:bg-opacity-60"
              key={path}
            >
              <PathLink path={path} enabled={isLinkable} />
            </div>
          );
        })}
    </div>
  );
}

function PathLink({ path, enabled }: { path: string; enabled: boolean }) {
  const [json] = useJson();