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

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?", "Please don't do this to me, I'm fragile", "I have your pics", "If you smile or laugh you owe me 2k", "Guess what you didn't notice the grammatical error", "Go and reply my snap werey😒", "Why are you still pressing the no, i have heard you", "You're still adamant on that no bah?", "You'll die single", "Lol, if you got to this then you definitely have a problem with me", "Oya dey go", "Máa lọ ", "Je vais ", "Bye pookie", "Oya rate my work, send it to my DM", ];

function App() { const [noClicks, setNoClicks] = useState(0); const [isValentine, setIsValentine] = useState(false); const yesButtonSize = (noClicks * 20) + 16;

const firstImg = "https://media.tenor.com/VIChDQ6ejRQAAAAj/jumping-bear-hearts-no-png.gif"; const secondImg = "https://media.tenor.com/f1xnRxTRxLAAAAAj/bears-with-kisses-bg.gif";

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

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

return ( <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100vh", fontFamily: "Arial, sans-serif", textAlign: "center", }} > {!isValentine ? ( <>

Ayomiposi will you be my valentine? 😏💘

<button onClick={handleYes} style={{ fontSize: ${yesButtonSize}px, margin: "10px", padding: "10px 20px", backgroundColor: "green", color: "white", border: "none", borderRadius: "5px", cursor: "pointer", }} > Yes <button onClick={handleNo} style={{ fontSize: "16px", margin: "10px", padding: "10px 20px", backgroundColor: "red", color: "white", border: "none", borderRadius: "5px", cursor: "pointer", }} > {noClicks === 0 ? "No" : NO_PHRASES[Math.min(noClicks - 1, NO_PHRASES.length - 1)]}

</> ) : ( <>

<div style={{ fontSize: "48px", color: "pink", fontWeight: "bold", }} > Yay!!! 💖🎉 </> )} ); }

function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise { return new Response( <html> <head> <title>Valentine's Day Invitation</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; font-family: Arial, sans-serif; } </style> </head> <body> <div id="root"></div> <script src="https://esm.town/v/std/catch"></script> <script type="module" src="${import.meta.url}"></script> </body> </html> , { headers: { "content-type": "text/html" }, }, ); }