components/editor/main/response.tsx

import Highlight from "react-highlight";
import { Loading } from "@/components/loading";
export const Response = ({ res, loading }: { res: any; loading: boolean }) => {
  return (
    <div className="overflow-auto h-full relative xl:col-span-2 border-l border-slate-200 dark:border-slate-700/50">
      <Highlight className="json text-sm !bg-slate-100 dark:!bg-slate-950/10 !h-full !p-3 !font-code !whitespace-pre-wrap">
        {JSON.stringify(res ?? {}, null, 2)}
      </Highlight>
      {loading && (
        <Loading>
          <p className="text-white dark:text-slate-400 text-lg mt-4">
            Processing...
          </p>
        </Loading>
      )}
    </div>
  );
};