refactor: extract welcome modal for consistency

2026-05-04 08:56:52 +00:00 · 2026-04-29 23:12:39 +05:30
parent d9e1febfee
commit 70a056a1d6
5 changed files with 102 additions and 97 deletions
@@ -0,0 +1,85 @@
+import {
+  HandPalmIcon,
+  ShieldCheckIcon,
+  WarningIcon,
+} from "@phosphor-icons/react";
+import Logo from "../Logo.tsx";
+import { Modal } from "../ui/Modal";
+import Saajan from "../ui/Saajan.tsx";
+
+export default function WelcomeModal({
+  setShowWelcome,
+}: {
+  setShowWelcome: (show: boolean) => void;
+}) {
+  return (
+    <>
+      <Modal isOpen={true}>
+        <div className="flex flex-col items-center text-center gap-4">
+          <div className="bg-primary/10 p-4 rounded-full animate-pulse">
+            <ShieldCheckIcon
+              size={48}
+              weight="duotone"
+              className="text-primary"
+            />
+          </div>
+          <h3 className="font-display text-2xl font-bold text-primary">
+            Welcome to &nbsp;
+            <Logo /> &nbsp;!
+          </h3>
+          <p className="text-base-content/80 leading-relaxed">
+            Before we begin, let me make a small promise.
+            <HandPalmIcon
+              size={18}
+              className="inline text-primary"
+              weight="fill"
+            />
+            <div className="divider my-0"></div>
+            <br />
+            Everything you write here is sealed with your password,{" "}
+            <span className="font-display text-success">cryptographically</span>
+            , before it leaves your hands.
+            <br />A fancy way of saying, I couldn't if I tried.
+          </p>
+
+          <div className="alert alert-warning bg-paper/20 border-paper/20 flex items-start gap-3 text-left py-3">
+            <WarningIcon size={24} weight="fill" className="shrink-0 mt-0.5" />
+            <p className="text-sm font-medium text-primary-content">
+              If you ever happen to forget your password, your letters are lost
+              to time, forever.
+              <br />
+              <span className="font-bold mt-2">
+                I highly, highly recommend storing this password in your{" "}
+                <a
+                  href="https://www.privacyguides.org/en/passwords/"
+                  target="_blank"
+                  className="link link-primary-content"
+                  rel="noopener"
+                >
+                  password manager
+                </a>{" "}
+                or somewhere safe to remember it.
+              </span>
+            </p>
+          </div>
+
+          <div className="modal-action w-full">
+            <button
+              type="button"
+              onClick={() => setShowWelcome(false)}
+              className="btn btn-primary w-full shadow-lg"
+            >
+              I'll remember
+            </button>
+          </div>
+        </div>
+      </Modal>
+      <div className="absolute bottom-0 z-1000 font-sans w-full">
+        <Saajan
+          position="top"
+          message={"I've lost words before.\nI know what it feels like."}
+        />
+      </div>
+    </>
+  );
+}