src/components/pro-modal/pro-modal.js

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import classNames from "classnames";
import { useLocalStorage } from "react-use";
import { defaultHTML } from "../../../utils/consts";
function ProModal({ open, html, onClose, }) {
    const [, setStorage] = useLocalStorage("html_content");
    const handleProClick = () => {
        if (html !== defaultHTML) {
            setStorage(html);
        }
    };
    return (_jsxs(_Fragment, { children: [_jsx("div", { className: classNames("h-screen w-screen bg-black/20 fixed left-0 top-0 z-40", {
                    "opacity-0 pointer-events-none": !open,
                }), onClick: () => onClose(false) }), _jsxs("div", { className: classNames("absolute top-0 -translate-y-[calc(100%+16px)] right-0 z-40 w-96 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden", {
                    "opacity-0 pointer-events-none": !open,
                }), 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: [_jsx("span", { className: "bg-linear-to-br shadow-green-500/10 dark:shadow-green-500/20 inline-block -skew-x-12 border border-gray-200 from-pink-300 via-green-200 to-yellow-200 text-xs font-bold text-black shadow-lg dark:from-pink-500 dark:via-green-500 dark:to-yellow-500 dark:text-black rounded-lg px-2.5 py-0.5 ", children: "PRO" }), "Your free inference quota is exhausted"] }), _jsxs("main", { className: "px-4 pt-3 pb-4", children: [_jsx("p", { className: "text-gray-950 text-sm font-semibold flex items-center justify-between", children: "Upgrade to a PRO account to activate Inference Providers and continue using DeepSite." }), _jsx("p", { className: "text-sm text-pretty text-gray-500 mt-2", children: "It also unlocks thousands of Space apps powered by ZeroGPU for 3d, audio, music, video and more!" }), _jsx("a", { href: "https://huggingface.co/subscribe/pro", target: "_blank", className: "mt-4 bg-black text-white cursor-pointer rounded-full py-2 px-3 text-sm font-medium w-full block text-center hover:bg-gray-800 transition duration-200 ease-in-out", onClick: handleProClick, children: "Subscribe to PRO ($9/month)" })] })] })] }));
}
export default ProModal;