File size: 2,496 Bytes
c9c8965 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
import classNames from "classnames";
import { useLocalStorage } from "react-use";
import { defaultHTML } from "../../../utils/consts";
function ProModal({
open,
html,
onClose,
}: {
open: boolean;
html: string;
onClose: React.Dispatch<React.SetStateAction<boolean>>;
}) {
const [, setStorage] = useLocalStorage("html_content");
const handleProClick = () => {
if (html !== defaultHTML) {
setStorage(html);
}
};
return (
<>
<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)}
></div>
<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,
}
)}
>
<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="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 ">
PRO
</span>
Your free inference quota is exhausted
</header>
<main className="px-4 pt-3 pb-4">
<p className="text-gray-950 text-sm font-semibold flex items-center justify-between">
Upgrade to a PRO account to activate Inference Providers and
continue using DeepSite.
</p>
<p className="text-sm text-pretty text-gray-500 mt-2">
It also unlocks thousands of Space apps powered by ZeroGPU for 3d,
audio, music, video and more!
</p>
<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}
>
Subscribe to PRO ($9/month)
</a>
</main>
</div>
</>
);
}
export default ProModal;
|