src/components/deploy-button/deploy-button.js

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/* 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 LoadButton from "../load-button/load-button";
const MsgToast = ({ url }) => (_jsxs("div", { className: "w-full flex items-center justify-center gap-3", children: ["Your space is live!", _jsx("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");
            }, children: "See Space" })] }));
function DeployButton({ html, error = false, auth, setHtml, prompts, }) {
    const [open, setOpen] = useState(false);
    const [loading, setLoading] = useState(false);
    const [path, setPath] = useState(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(_jsx(MsgToast, { url: `https://huggingface.co/spaces/${response.path ?? path}` }), {
                    autoClose: 10000,
                });
                setPath(response.path);
            }
            else {
                toast.error(response.message);
            }
        }
        catch (err) {
            toast.error(err.message);
        }
        finally {
            setLoading(false);
            setOpen(false);
        }
    };
    return (_jsxs("div", { className: "flex items-center justify-end gap-5", children: [_jsx(LoadButton, { auth: auth, setHtml: setHtml, setPath: setPath }), _jsxs("div", { className: "relative flex items-center justify-end", children: [auth &&
                        (auth.isLocalUse ? (_jsx(_Fragment, { children: _jsx("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", children: "Local Usage" }) })) : (_jsxs(_Fragment, { children: [_jsx("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";
                                        }
                                    }, children: _jsx(FaPowerOff, { className: "text-lg text-red-500" }) }), _jsxs("p", { className: "mr-3 text-xs lg:text-sm text-gray-300", children: [_jsx("span", { className: "max-lg:hidden", children: "Connected as " }), _jsx("a", { href: `https://huggingface.co/${auth.preferred_username}`, target: "_blank", className: "underline hover:text-white", children: auth.preferred_username })] })] }))), _jsx("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), children: path ? "Update Space" : "Deploy to Space" }), _jsx("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) }), _jsx("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,
                        }), children: !auth ? (_jsx(Login, { html: html, children: _jsx("p", { className: "text-gray-500 text-sm mb-3", children: "Host this project for free and share it with your friends." }) })) : (_jsxs(_Fragment, { children: [_jsxs("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", children: [_jsxs("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", children: [_jsx("img", { src: SpaceIcon, alt: "Space Icon", className: "size-4" }), "Space"] }), "Configure Deployment"] }), _jsxs("main", { className: "px-4 pt-3 pb-4 space-y-3", children: [_jsx("p", { className: "text-xs text-amber-600 bg-amber-500/10 rounded-md p-2", children: path ? (_jsxs("span", { children: ["Your space is live at", " ", _jsxs("a", { href: `https://huggingface.co/spaces/${path}`, target: "_blank", className: "underline hover:text-amber-700", children: ["huggingface.co/", path] }), ". You can update it by deploying again."] })) : ("Deploy your project to a space on the Hub. Spaces are a way to share your project with the world.") }), !path && (_jsxs("label", { className: "block", children: [_jsx("p", { className: "text-gray-600 text-sm font-medium mb-1.5", children: "Space Title" }), _jsx("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 }) })] })), error && (_jsx("p", { className: "text-red-500 text-xs bg-red-500/10 rounded-md p-2", children: "Your code has errors. Fix them before deploying." })), _jsx("div", { className: "pt-2 text-right", children: _jsxs("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, children: [path ? "Update Space" : "Create Space", loading && _jsx(Loading, {})] }) })] })] })) })] })] }));
}
export default DeployButton;