Function ColumnElement

app/components/Column.tsx:16–41

(column: ColumnProps)

};

function ColumnElement(column: ColumnProps) {
  const { id, title, children } = column;
  const [json] = useJson();
  const { minimal } = useJsonDoc();
  const iconColor = useMemo(() => colorForItemAtPath(id, json), [id, json]);

  return (
    <div
      className={
        "column flex-none border-r-[1px] border-slate-300 w-80 transition dark:border-slate-600"
      }
    >
      <div className="flex items-center text-slate-800 bg-slate-50 mb-[3px] p-2 pb-0 transition dark:bg-slate-900 dark:text-slate-300">
        {column.icon && <column.icon className="h-6 w-6 mr-1" />}
        <Title className="text-ellipsis overflow-hidden">{title}</Title>
      </div>
      <div
        className={`overflow-y-auto ${
          minimal ? "h-viewerHeightMinimal" : "h-viewerHeight"
        } no-scrollbar`}
      >
        {children}
      </div>
    </div>
  );
}

export const Column = memo(ColumnElement);