refactor: implement reusable Modal component

This commit is contained in:
ramvignesh-b
2026-04-28 22:52:06 +05:30
parent 8b28949d73
commit faee0b45d6
11 changed files with 316 additions and 323 deletions
@@ -2,22 +2,22 @@ import { useNavigate } from "react-router-dom";
import { ROUTES } from "../../config/routes";
interface PostActionOverlayProps {
revealState: "sealed" | "revealed" | "burning" | "burned";
revealState: "SEALED" | "REVEALED" | "BURNING" | "BURNED";
}
export function PostActionOverlay({ revealState }: PostActionOverlayProps) {
const navigate = useNavigate();
return (
<div
className={`flex flex-col items-center justify-center min-h-screen bg-base-100 ${revealState === "burned" ? "opacity-100" : "opacity-0"} transition-all delay-300 duration-1000`}
className={`flex flex-col items-center justify-center min-h-screen bg-base-100 ${revealState === "BURNED" ? "opacity-100" : "opacity-0"} transition-all delay-1000 duration-1000`}
>
<h1
className={`text-6xl ${revealState === "burned" ? "opacity-100" : "opacity-0"} lg:text-9xl italic font-extralight text-base-content animate-[pulse_3s_ease-in-out_3]`}
className={`text-6xl ${revealState === "BURNED" ? "opacity-100" : "opacity-0"} lg:text-9xl italic font-extralight text-base-content animate-[pulse_3s_ease-in-out_3]`}
>
It is done
</h1>
<div
className={`text-xl ${revealState === "burned" ? "opacity-100" : "opacity-0"} lg:text-4xl text-center font-extralight text-base-content font-display mt-8 delay-3000 transition-all duration-2000 tracking-wide`}
className={`text-xl ${revealState === "BURNED" ? "opacity-100" : "opacity-0"} lg:text-4xl text-center font-extralight text-base-content font-display mt-8 delay-3000 transition-all duration-2000 tracking-wide`}
>
<p className="w-full">
May your <span className="italic text-primary">soul</span> find