release 0.3.4

apps/web/ui/layout/sign-in-modal.tsx

@@ -0,0 +1,60 @@
+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],
+  );
+}