components/editor/main/endpoint.tsx

import { useMemo } from "react";
import classNames from "classnames";

import { Method } from "@/components/method";
import { splitStringBracket } from "@/utils";
import { ApiRoute } from "@/utils/type";

export const Endpoint = ({
  endpoint,
  children,
  onChange,
}: {
  endpoint: ApiRoute;
  children: React.ReactElement;
  onChange: (value: string) => void;
}) => {
  const path_formatted = useMemo(
    () => splitStringBracket(endpoint.path),
    [endpoint.path]
  );

  const handleChange = (value: string, index: number) => {
    const currentString = splitStringBracket(endpoint.path);
    currentString[index] = value;
    onChange(currentString.join(""));
  };

  return (
    <div className="bg-slate-900 w-full">
      <div className="bg-slate-950/50 p-3 rounded-lg flex items-center justify-between">
        <div className="text-white text-sm flex items-center justify-start gap-2 w-full">
          <Method method={endpoint.method} />
          <div className="flex items-center justify-start gap-1">
            {path_formatted.map((p, i) => {
              const isCustomizable = p.includes("{") && p.includes("}");
              return (
                <p
                  key={i}
                  className={classNames("", {
                    "bg-indigo-600 !text-white px-1.5 rounded-md outline-none bg-opacity-80":
                      isCustomizable,
                    "text-slate-300": !isCustomizable,
                  })}
                  contentEditable={isCustomizable}
                  onBlur={(e) => {
                    handleChange(e.currentTarget.textContent as string, i);
                  }}
                >
                  {p}
                </p>
              );
            })}
          </div>
        </div>
        {children}
      </div>
    </div>
  );
};