mirror of
https://github.com/ramvignesh-b/pi-ku.git
synced 2026-05-04 08:56:52 +00:00
RamVignesh B
6cf24731ce
* feat: add template based email content (html + plaintext fallback) * feat: init saajan component * feat: add aesthetic noise background and implement Saajan component in register and login * feat: add post seal modal for vault * refactor: add proper props interfaces * refactor: expose props on ui components * feat: add ssajan in lots of flows * fix: remove render test with no value and add aria helper for btn identification * refactor: update email notification to account for proper arguments * refactor: refactor E2E auth helper and mail parsing logic --------- Co-authored-by: ramvignesh-b <ramvignesh-b@github.com>
76 lines
2.9 KiB
TypeScript
76 lines
2.9 KiB
TypeScript
import {
|
|
EyeSlashIcon,
|
|
PaperPlaneTiltIcon,
|
|
XCircleIcon,
|
|
} from "@phosphor-icons/react";
|
|
|
|
interface ShareModalProps {
|
|
shareLink: string | null;
|
|
setShareLink: (link: string | null) => void;
|
|
}
|
|
|
|
export function ShareModal({ shareLink, setShareLink }: ShareModalProps) {
|
|
const copyToClipboard = async () => {
|
|
if (!shareLink) return;
|
|
await navigator.clipboard.writeText(shareLink);
|
|
};
|
|
return (
|
|
<div className="modal modal-open modal-middle bg-base-100/20 backdrop-blur-md z-100">
|
|
<div className="modal-box bg-base-100 border border-base-content/5 shadow-2xl relative">
|
|
<button
|
|
type="button"
|
|
className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
|
|
onClick={() => setShareLink(null)}
|
|
aria-label="Close"
|
|
>
|
|
<XCircleIcon size={18} weight="bold" />
|
|
</button>
|
|
<div className="flex flex-col items-center justify-center text-center gap-6 py-4">
|
|
<div className="space-y-2">
|
|
<PaperPlaneTiltIcon
|
|
size={48}
|
|
weight="bold"
|
|
className="mb-4 text-primary mx-auto animate-[bounce_3s_ease-in-out_infinite]"
|
|
/>
|
|
<h3 className="font-serif text-3xl">Send this letter</h3>
|
|
<p className="text-base-content/80 text-sm font-sans mt-4">
|
|
You've carried these words long enough. Send your letter now, and
|
|
let the <span className="text-accent font-display">unsaid</span>{" "}
|
|
finally find its home.
|
|
</p>
|
|
<div className="divider mx-auto" />
|
|
<blockquote className="text-sm info text-neutral-content/60 font-sans">
|
|
The recipient will have the same viewing experience like you do
|
|
now.
|
|
</blockquote>
|
|
</div>
|
|
<div className="w-full flex items-center gap-2 bg-base-300 p-2 rounded-xl">
|
|
<input
|
|
id="share-link-input"
|
|
readOnly
|
|
value={shareLink ?? ""}
|
|
className="flex-1 bg-transparent text-xs font-mono px-2 overflow-hidden text-ellipsis whitespace-nowrap outline-none"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={copyToClipboard}
|
|
className="btn btn-primary font-sans btn-sm rounded-tl-xl rounded-bl-xl rounded-tr-full rounded-br-full"
|
|
>
|
|
Copy
|
|
</button>
|
|
</div>
|
|
<div className="flex flex-col gap-1 uppercase tracking-widest text-base-content/30 font-sans">
|
|
<p className="textarea-xs flex items-center justify-center">
|
|
<EyeSlashIcon weight="duotone" size={18} className="mr-2" />{" "}
|
|
Zero-Knowledge Share:
|
|
</p>
|
|
<p className="textarea-xs font-mono text-center">
|
|
The key never leaves your or the recipient's browser.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|