me
84 lines
2.6 KiB
TypeScript
84 lines
2.6 KiB
TypeScript
import { LockIcon } from "@phosphor-icons/react";
|
|
import type { NavigateFunction } from "react-router-dom";
|
|
import { PATHS, ROUTES } from "../../config/routes";
|
|
import { Modal } from "../ui/Modal";
|
|
|
|
interface PostSealModalProps {
|
|
sealedTargetId: string | null;
|
|
navigate: NavigateFunction;
|
|
type: "KEPT" | "VAULT";
|
|
}
|
|
|
|
export function PostSealModal({
|
|
sealedTargetId,
|
|
navigate,
|
|
type = "KEPT",
|
|
}: PostSealModalProps) {
|
|
return (
|
|
<Modal isOpen={!!sealedTargetId} data-testid="post-seal-modal">
|
|
<LockIcon size={32} weight="duotone" className="text-primary mt-3" />
|
|
<h3 className="font-serif text-2xl">Your letter is sealed</h3>
|
|
<p className="text-base-content/60">
|
|
It's encrypted and always safe in your drawer.
|
|
</p>
|
|
{type === "KEPT" ? (
|
|
<p className="text-base-content/80 text-sm font-sans">
|
|
When you're ready,
|
|
<br />
|
|
you can{" "}
|
|
<span className="text-primary font-bold font-display">read</span> it,{" "}
|
|
<span className="text-accent font-bold font-display">send</span> it to
|
|
someone, or{" "}
|
|
<span className="text-error font-bold font-display">burn</span> it to
|
|
release
|
|
</p>
|
|
) : (
|
|
<p className="text-base-content/80 text-sm font-sans">
|
|
Be assured that the letter will find you when the time is right.
|
|
<br />
|
|
Till then,{" "}
|
|
<span className="font-bold font-display text-primary">
|
|
take a deep breath
|
|
</span>
|
|
, <span className="font-bold font-display text-accent">manifest</span>
|
|
, and{" "}
|
|
<span className="font-bold font-display text-success">
|
|
let it rest
|
|
</span>
|
|
.
|
|
</p>
|
|
)}
|
|
<div className="modal-action w-full justify-center gap-3 mt-4 mb-4">
|
|
{type === "KEPT" ? (
|
|
<>
|
|
<button
|
|
type="button"
|
|
data-testid="keep-it-btn"
|
|
className="btn btn-ghost btn-sm"
|
|
onClick={() => navigate(ROUTES.DRAWER)}
|
|
>
|
|
Keep it to myself
|
|
</button>
|
|
<button
|
|
type="button"
|
|
data-testid="view-letter-btn"
|
|
className="btn btn-primary btn-sm"
|
|
onClick={() => navigate(PATHS.read(sealedTargetId!))}
|
|
>
|
|
View letter
|
|
</button>
|
|
</>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
className="btn btn-ghost btn-sm"
|
|
onClick={() => navigate(ROUTES.DRAWER)}
|
|
>
|
|
Step Away...
|
|
</button>
|
|
)}
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|