DAPP PREVIEW

Test your Dapp here—JSX, Tailwind, Lucide, the works!

Dapp Component (JSX + TS)

function TestDapp() {
  const [betAmount, setBetAmount] = useState<string>("0.01");
  const [loading, setLoading] = useState<boolean>(false);
  const [result, setResult] = useState<string | null>(null);

useEffect(() => {
    setResult("Ready to bet " + betAmount);
  }, [betAmount]);

return (
    <div className="text-center">
      <Lucide.Rocket className="w-12 h-12 mx-auto text-purple-400 animate-bounce" />
      <p className="text-lg text-gray-300 mb-4">Bet Dapp - Test Your Luck!</p>
      <input
        type="text"
        value={betAmount}
        onChange={(e) => setBetAmount(e.target.value)}
        className="px-4 py-2 mb-4 bg-gray-700 text-white border border-gray-600 rounded focus:outline-none focus:border-purple-400"
      />
      <button
        onClick={() => setLoading(!loading)}
        className="px-6 py-3 rounded-full border-2 border-purple-400 text-purple-400 hover:bg-purple-400 hover:text-black transition-all"
      >
        {loading ? "Spinning..." : "Spin"}
      </button>
      <p className="text-sm text-gray-400 mt-4">{result}</p>
    </div>
  );
}

Dapp JSON

Enter code and JSON to preview your Dapp!