components/editor/main/request.tsx

import { ApiRoute } from "@/utils/type";

export const Request = ({
  endpoint,
  children,
}: {
  endpoint: ApiRoute;
  children: React.ReactElement;
}) => {
  return (
    <div className="h-full bg-slate-900 p-4">
      {children}
      {endpoint?.parameters && (
        <div className="mt-6 grid grid-cols-1 gap-4">
          <p className="text-slate-400 uppercase text-xs font-semibold">
            Optional parameters
          </p>
          {endpoint?.parameters &&
            Object.entries(endpoint.parameters).map(([key, value]) => (
              <div
                key={key}
                className="flex items-center justify-between gap-2"
              >
                <p className="text-slate-300 text-sm">{key}</p>
                <input
                  value={value as string}
                  type="text"
                  className="bg-slate-950/50 w-full rounded-md px-2 py-1 text-slate-100 outline-none placeholder:text-slate-600"
                  placeholder="value"
                />
              </div>
            ))}
        </div>
      )}
    </div>
  );
};