function MainComponent() { const [challenges, setChallenges] = React.useState([ { title: "Flirting in the Park", image: "/images/park.jpg", alt: "A sunny park", attire: "Wearing Blue", time: "Before 6 PM" }, { title: "Flirting on the Beach", image: "/images/beach.jpg", alt: "A bustling beach", attire: "Wearing Red", time: "After 6 PM" }, { title: "Flirting at a Cafe", image: "/images/cafe.jpg", alt: "A cozy cafe", attire: "Wearing Casuals", time: "Before 10 AM" } ]); const handleImageChange = (index, e)=>{ const newChallenges = [ ...challenges ]; newChallenges[index].image = e.target.value; setChallenges(newChallenges); }; const handleTitleChange = (index, e)=>{ const newChallenges = [ ...challenges ]; newChallenges[index].title = e.target.value; setChallenges(newChallenges); }; const handleAttireChange = (index, e)=>{ const newChallenges = [ ...challenges ]; newChallenges[index].attire = e.target.value; setChallenges(newChallenges); }; const handleTimeChange = (index, e)=>{ const newChallenges = [ ...challenges ]; newChallenges[index].time = e.target.value; setChallenges(newChallenges); }; const challengeCards = challenges.map((challenge, index)=>/*#__PURE__*/ React.createElement("div", { className: "bg-white p-5 rounded-lg shadow-lg flex flex-col items-center", key: index, __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: challenge.title, onChange: (e)=>handleTitleChange(index, e), className: "text-2xl font-semibold font-roboto text-center mb-6 text-[#121212] bg-transparent border-0", name: `title-${index}`, __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: challenge.image, onChange: (e)=>handleImageChange(index, e), className: "w-full h-48 mb-5", name: `image-${index}`, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: challenge.image, alt: challenge.alt, className: "w-full h-48 object-cover mb-5", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: challenge.attire, onChange: (e)=>handleAttireChange(index, e), className: "font-roboto mb-4 text-[#121212] bg-transparent border-0", name: `attire-${index}`, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: challenge.time, onChange: (e)=>handleTimeChange(index, e), className: "font-roboto text-[#121212] bg-transparent border-b border-gray-300 focus:border-[#2ecc71]", name: `time-${index}`, __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f7f7] py-10 px-5 md:px-10", __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center mb-10 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, "Challenge Generator"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, challengeCards), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-10", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "screenshotBtn", className: "bg-[#2ecc71] text-white font-bold py-2 px-4 rounded-md font-roboto", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Capture Screenshot"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } body { animation: fadeIn 1s ease-in-out; } `)); }