/** @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 πŸ’”", "baba 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", ];

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

Will you be my Valentine? πŸ’˜

Yes {noClicks === 0 ? "No" : NO_PHRASES[Math.min(noClicks - 1, NO_PHRASES.length - 1)]}
) : ( <>