src/components/deploy-button/deploy-button.tsx

/* eslint-disable @typescript-eslint/no-explicit-any */
import { useState } from "react";
import classNames from "classnames";
import { toast } from "react-toastify";
import { FaPowerOff } from "react-icons/fa6";

import SpaceIcon from "@/assets/space.svg";
import Loading from "../loading/loading";
import Login from "../login/login";
import { Auth } from "./../../../utils/types";
import LoadButton from "../load-button/load-button";

const MsgToast = ({ url }: { url: string }) => (
  <div className="w-full flex items-center justify-center gap-3">
    Your space is live!
    <button
      className="bg-black text-sm block text-white rounded-md px-3 py-1.5 hover:bg-gray-900 cursor-pointer"
      onClick={() => {
        window.open(url, "_blank");
      }}
    >
      See Space
    </button>
  </div>
);

function DeployButton({
  html,
  error = false,
  auth,
  setHtml,
  prompts,
}: {
  html: string;
  error: boolean;
  auth?: Auth;
  setHtml: (html: string) => void;
  prompts: string[];
}) {
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [path, setPath] = useState<string | undefined>(undefined);

  const [config, setConfig] = useState({
    title: "",
  });

  const createSpace = async () => {
    setLoading(true);

    try {
      const request = await fetch("/api/deploy", {
        method: "POST",
        body: JSON.stringify({
          title: config.title,
          path,
          html,
          prompts,
        }),
        headers: {
          "Content-Type": "application/json",
        },
      });
      const response = await request.json();
      if (response.ok) {
        toast.success(
          <MsgToast
            url={`https://huggingface.co/spaces/${response.path ?? path}`}
          />,
          {
            autoClose: 10000,
          }
        );
        setPath(response.path);
      } else {
        toast.error(response.message);
      }
    } catch (err: any) {
      toast.error(err.message);
    } finally {
      setLoading(false);
      setOpen(false);
    }
  };

  return (
    <div className="flex items-center justify-end gap-5">
      <LoadButton auth={auth} setHtml={setHtml} setPath={setPath} />
      <div className="relative flex items-center justify-end">
        {auth &&
          (auth.isLocalUse ? (
            <>
              <div className="bg-amber-500/10 border border-amber-10 text-amber-500 font-semibold leading-5 lg:leading-6 py-1 px-5 text-xs lg:text-sm rounded-md mr-4 select-none">
                Local Usage
              </div>
            </>
          ) : (
            <>
              <button
                className="mr-2 cursor-pointer"
                onClick={() => {
                  if (confirm("Are you sure you want to log out?")) {
                    // go to /auth/logout page
                    window.location.href = "/auth/logout";
                  }
                }}
              >
                <FaPowerOff className="text-lg text-red-500" />
              </button>
              <p className="mr-3 text-xs lg:text-sm text-gray-300">
                <span className="max-lg:hidden">Connected as </span>
                <a
                  href={`https://huggingface.co/${auth.preferred_username}`}
                  target="_blank"
                  className="underline hover:text-white"
                >
                  {auth.preferred_username}
                </a>
              </p>
            </>
          ))}
        <button
          className={classNames(
            "relative cursor-pointer flex-none flex items-center justify-center rounded-md text-xs lg:text-sm font-semibold leading-5 lg:leading-6 py-1.5 px-5 hover:bg-pink-400 text-white shadow-sm dark:shadow-highlight/20",
            {
              "bg-pink-400": open,
              "bg-pink-500": !open,
            }
          )}
          onClick={() => setOpen(!open)}
        >
          {path ? "Update Space" : "Deploy to Space"}
        </button>
        <div
          className={classNames(
            "h-screen w-screen bg-black/20 fixed left-0 top-0 z-10",
            {
              "opacity-0 pointer-events-none": !open,
            }
          )}
          onClick={() => setOpen(false)}
        ></div>
        <div
          className={classNames(
            "absolute top-[calc(100%+8px)] right-0 z-10 w-80 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
            {
              "opacity-0 pointer-events-none": !open,
            }
          )}
        >
          {!auth ? (
            <Login html={html}>
              <p className="text-gray-500 text-sm mb-3">
                Host this project for free and share it with your friends.
              </p>
            </Login>
          ) : (
            <>
              <header className="flex items-center text-sm px-4 py-2 border-b border-gray-200 gap-2 bg-gray-100 font-semibold text-gray-700">
                <span className="text-xs bg-pink-500/10 text-pink-500 rounded-full pl-1.5 pr-2.5 py-0.5 flex items-center justify-start gap-1.5">
                  <img src={SpaceIcon} alt="Space Icon" className="size-4" />
                  Space
                </span>
                Configure Deployment
              </header>
              <main className="px-4 pt-3 pb-4 space-y-3">
                <p className="text-xs text-amber-600 bg-amber-500/10 rounded-md p-2">
                  {path ? (
                    <span>
                      Your space is live at{" "}
                      <a
                        href={`https://huggingface.co/spaces/${path}`}
                        target="_blank"
                        className="underline hover:text-amber-700"
                      >
                        huggingface.co/{path}
                      </a>
                      . You can update it by deploying again.
                    </span>
                  ) : (
                    "Deploy your project to a space on the Hub. Spaces are a way to share your project with the world."
                  )}
                </p>
                {!path && (
                  <label className="block">
                    <p className="text-gray-600 text-sm font-medium mb-1.5">
                      Space Title
                    </p>
                    <input
                      type="text"
                      value={config.title}
                      className="mr-2 border rounded-md px-3 py-1.5 border-gray-300 w-full text-sm"
                      placeholder="My Awesome Space"
                      onChange={(e) =>
                        setConfig({ ...config, title: e.target.value })
                      }
                    />
                  </label>
                )}
                {error && (
                  <p className="text-red-500 text-xs bg-red-500/10 rounded-md p-2">
                    Your code has errors. Fix them before deploying.
                  </p>
                )}
                <div className="pt-2 text-right">
                  <button
                    disabled={error || loading || (!path && !config.title)}
                    className="relative rounded-full bg-black px-5 py-2 text-white font-semibold text-xs hover:bg-black/90 transition-all duration-100 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:hover:bg-gray-300"
                    onClick={createSpace}
                  >
                    {path ? "Update Space" : "Create Space"}
                    {loading && <Loading />}
                  </button>
                </div>
              </main>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

export default DeployButton;