Spaces:
Running
Running
File size: 2,526 Bytes
c10f8f8 e710a1b c10f8f8 e710a1b c10f8f8 e710a1b c10f8f8 e710a1b c10f8f8 e710a1b c10f8f8 e710a1b c10f8f8 |
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 72 73 |
import { useLocalStorage } from "react-use";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { useUser } from "@/hooks/useUser";
import { isTheSameHtml } from "@/lib/compare-html-diff";
import { Page } from "@/types";
import { useEditor } from "@/hooks/useEditor";
export const LoginModal = ({
open,
onClose,
title = "Log In to use DeepSite for free",
description = "Log In through your Hugging Face account to continue using DeepSite and increase your monthly free limit.",
prompt,
}: {
open: boolean;
onClose: React.Dispatch<React.SetStateAction<boolean>>;
title?: string;
description?: string;
prompt?: string;
}) => {
const { openLoginWindow } = useUser();
const { pages } = useEditor();
const [, setStorage] = useLocalStorage("pages");
const [, setPromptStorage] = useLocalStorage("prompt", "");
const handleClick = async () => {
if (prompt) {
setPromptStorage(prompt);
}
if (pages && !isTheSameHtml(pages[0].html)) {
setStorage(pages);
}
openLoginWindow();
onClose(false);
};
return (
<Dialog open={open} onOpenChange={onClose}>
<DialogContent
className="sm:max-w-lg lg:!p-8 !rounded-3xl !bg-white !border-neutral-100"
showCloseButton={false}
>
<DialogTitle className="hidden" />
<main className="flex flex-col items-start text-left relative pt-2">
<div className="flex items-center justify-start -space-x-4 mb-5">
<div className="size-14 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-3xl opacity-50">
💪
</div>
<div className="size-16 rounded-full bg-amber-200 shadow-2xl flex items-center justify-center text-4xl z-2">
😎
</div>
<div className="size-14 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-3xl opacity-50">
🙌
</div>
</div>
<p className="text-2xl font-bold text-neutral-950">{title}</p>
<p className="text-neutral-500 text-base mt-2 max-w-sm">
{description}
</p>
<Button
variant="black"
size="lg"
tabIndex={-1}
className="w-full !text-base !h-11 mt-8"
onClick={handleClick}
>
Log In to Continue
</Button>
</main>
</DialogContent>
</Dialog>
);
};
|