61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
import Modal from "@/ui/shared/modal";
|
|
import {
|
|
useState,
|
|
Dispatch,
|
|
SetStateAction,
|
|
useCallback,
|
|
useMemo,
|
|
} from "react";
|
|
import EmailButton from "./email-login-button";
|
|
import Link from "next/link";
|
|
|
|
const SignInModal = ({
|
|
showSignInModal,
|
|
setShowSignInModal,
|
|
}: {
|
|
showSignInModal: boolean;
|
|
setShowSignInModal: Dispatch<SetStateAction<boolean>>;
|
|
}) => {
|
|
return (
|
|
<Modal showModal={showSignInModal} setShowModal={setShowSignInModal}>
|
|
<div className="w-full overflow-hidden shadow-xl md:max-w-md md:rounded-2xl md:border md:border-gray-200">
|
|
<div className="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 bg-white px-4 py-5 pt-8 text-center md:px-16">
|
|
<h3 className="font-display text-2xl font-bold">Inke</h3>
|
|
<p className="text-sm text-gray-500">
|
|
Please enter your email, sign in to unlock more features.{" "}
|
|
<Link
|
|
className="text-blue-500 after:content-['_↗'] hover:text-blue-300"
|
|
href="/pricing"
|
|
>
|
|
Learn more
|
|
</Link>{" "}
|
|
about our plan.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mx-auto flex flex-col space-y-4 bg-gray-50 px-6 pb-8 pt-2 md:px-16">
|
|
<EmailButton />
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export function useSignInModal() {
|
|
const [showSignInModal, setShowSignInModal] = useState(false);
|
|
|
|
const SignInModalCallback = useCallback(() => {
|
|
return (
|
|
<SignInModal
|
|
showSignInModal={showSignInModal}
|
|
setShowSignInModal={setShowSignInModal}
|
|
/>
|
|
);
|
|
}, [showSignInModal, setShowSignInModal]);
|
|
|
|
return useMemo(
|
|
() => ({ setShowSignInModal, SignInModal: SignInModalCallback }),
|
|
[setShowSignInModal, SignInModalCallback],
|
|
);
|
|
}
|