/** @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? 🙏", "Don't break my heart! 💘", "What about a maybe? 🤔", "Last try! 💖", ];

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

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 ? ( <>

Will you be my Valentine? 💘

<button onClick={handleYes} style={{ fontSize: "18px", 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>For You😝</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" }, }, ); }

JohnIlmar

my-first-val

Will you be my Valentine? 💘