my-first-val

/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client";

const NO_PHRASES = [ "No 💔", "Pretty please? 🥺", "But we'd be so cute together 💕", "One more chance, pookie?", "Don't break my heart :(", "What about a maybe?", ];

function App() { const [noClicks, setNoClicks] = useState(0); const [isValentine, setIsValentine] = useState(false);

const yesSize = 18 + noClicks * 6;

const handleNo = () => { setNoClicks((prev) => prev + 1); };

const handleYes = () => { setIsValentine(true); };

return ( <div style={{ height: "100vh", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", fontFamily: "Arial", textAlign: "center", }} > {!isValentine ? ( <> <p style={{ color: "#e91e63", fontStyle: "italic" }}> from Farah to Yousry 💌

      <h1>Will you be my Valentine? 💘</h1>

      <div style={{ marginTop: 20 }}>
        <button
          onClick={handleYes}
          style={{
            fontSize: yesSize,
            padding: "10px 25px",
            marginRight: 10,
            backgroundColor: "green",
            color: "white",
            border: "none",
            borderRadius: 8,
            cursor: "pointer",
          }}
        >
          Yes
        </button>

        <button
          onClick={handleNo}
          style={{
            fontSize: 18,
            padding: "10px 25px",
            backgroundColor: "red",
            color: "white",
            border: "none",
            borderRadius: 8,
            cursor: "pointer",
          }}
        >
          {NO_PHRASES[Math.min(noClicks, NO_PHRASES.length - 1)]}
        </button>
      </div>
    </>
  ) : (
    <>
      <h1>Yaaay 💖
      كنت عارفة🤭</h1>
      <p>Farah & Yousry 💍</p>
    </>
  )}
</div>

); }

createRoot(document.getElementById("root")!).render();.