63 lines
2.3 KiB
TypeScript
63 lines
2.3 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
interface HowItWorksModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function HowItWorksModal({ isOpen, onClose }: HowItWorksModalProps) {
|
|
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">How It Works</h2>
|
|
|
|
<div className="space-y-4">
|
|
{[
|
|
{ step: "Sign In or Connect Your Wallet", desc: "Log in with X, Google, or connect your wallet. A secure wallet is created instantly with Privy." },
|
|
{ step: "Create or Join a Game", desc: "Start a game with your own entry amount or join one that's already waiting." },
|
|
{ step: "Enter the Game", desc: "Confirm your entry and stay on the website—the game will start automatically once all players are ready." },
|
|
{ step: "Win and Get Paid", desc: "Win the match and your prize goes straight to your wallet." },
|
|
].map(({ step, desc }, index) => (
|
|
<div key={index}>
|
|
<h3 className="text-[rgb(248,144,22)] font-bold text-lg">
|
|
{index + 1}. {step}
|
|
</h3>
|
|
<p className="text-xs text-gray-400 font-mono">{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>
|
|
);
|
|
}
|