Spaces:
Running
Running
File size: 2,202 Bytes
13ae717 378e163 13ae717 378e163 13ae717 |
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 |
import { useLocalStorage } from "react-use";
import { defaultHTML } from "@/lib/consts";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { useUser } from "@/hooks/useUser";
export const LoginModal = ({
open,
html,
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.",
}: {
open: boolean;
html?: string;
onClose: React.Dispatch<React.SetStateAction<boolean>>;
title?: string;
description?: string;
}) => {
const { openLoginWindow } = useUser();
const [, setStorage] = useLocalStorage("html_content");
const handleClick = async () => {
if (html && html !== defaultHTML) {
setStorage(html);
}
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">
<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"
className="w-full !text-base !h-11 mt-8"
onClick={handleClick}
>
Log In to Continue
</Button>
</main>
</DialogContent>
</Dialog>
);
};
|