68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { URL_WHITEPAPER, URL_TELEGRAM } from "../shared/constants";
|
|
|
|
interface FirstVisitModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function FirstVisitModal({ isOpen, onClose }: FirstVisitModalProps) {
|
|
const [shouldRender, setShouldRender] = useState(isOpen);
|
|
const [animationClass, setAnimationClass] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setShouldRender(true);
|
|
setAnimationClass("modal-enter");
|
|
} else {
|
|
setAnimationClass("modal-exit");
|
|
// Wait for animation to finish before unmounting
|
|
const timer = setTimeout(() => setShouldRender(false), 200); // match animation duration
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [isOpen]);
|
|
|
|
if (!shouldRender) return null;
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 bg-black/70 flex justify-center items-start pt-10 z-50"
|
|
onClick={onClose}
|
|
>
|
|
<div
|
|
className={`bg-[rgb(30,30,30)] text-white w-full max-w-lg p-6 rounded-2xl shadow-lg transform transition-transform duration-300 ${animationClass}`}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<h2 className="text-xl font-bold mb-4">Welcome to DuelFi.io!</h2>
|
|
|
|
<div className="space-y-4">
|
|
<p className="text-gray-300">
|
|
Challenge your friends (or strangers) in a head-to-head skill games and earn from your victories!
|
|
<br />
|
|
<br />
|
|
Create or join duels, set an entry fee, and the winner takes all.
|
|
</p>
|
|
|
|
{[
|
|
{ step: "New here? Check out our", desc: "Whitepaper to understand how everything works.", link: URL_WHITEPAPER },
|
|
{ step: "Got questions or just wanna vibe with the squad?", desc: "Join our Telegram.", link: URL_TELEGRAM },
|
|
].map(({ step, desc, link }, index) => (
|
|
<div key={index} onClick={() => window.open(link, "_blank")}>
|
|
<h3 className="text-[rgb(248,144,22)] font-bold text-lg">
|
|
{step}
|
|
</h3>
|
|
<p className="text-s text-white font-bold ">{desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<button
|
|
className="mt-6 w-full bg-[rgb(248,144,22)] text-black font-semibold py-2 rounded-xl transition hover:bg-white hover:scale-105"
|
|
onClick={onClose}
|
|
>
|
|
Okay
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|