function MainComponent() { const [likes, setLikes] = React.useState({ corn1: 0, corn2: 0, corn3: 0 }); const [comments, setComments] = React.useState({ corn1: [], corn2: [], corn3: [] }); const [username, setUsername] = React.useState(""); const [currentCorn, setCurrentCorn] = React.useState("corn1"); const [timer, setTimer] = React.useState(60); React.useEffect(()=>{ const corns = [ "corn1", "corn2", "corn3" ]; let index = 0; const interval = setInterval(()=>{ index = (index + 1) % corns.length; setCurrentCorn(corns[index]); setTimer(60); // Reset the timer to 60 seconds when the corn changes }, 60000); return ()=>clearInterval(interval); }, []); React.useEffect(()=>{ if (timer > 0) { const countdown = setInterval(()=>{ setTimer(timer - 1); }, 1000); return ()=>clearInterval(countdown); } }, [ timer ]); const handleLike = (corn)=>{ setLikes((prevLikes)=>({ ...prevLikes, [corn]: prevLikes[corn] + 1 })); }; const handleComment = (corn, comment)=>{ setComments((prevComments)=>({ ...prevComments, [corn]: [ ...prevComments[corn], comment ] })); }; const submitComment = (event, corn)=>{ event.preventDefault(); const comment = event.target.elements.comment.value; handleComment(corn, { username, text: comment }); event.target.reset(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-[#fafafa] min-h-screen", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white border border-gray-300 rounded-lg max-w-sm w-full my-6", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-300 flex justify-between items-center", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "Featured Corn"), /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, timer, " sec")), /*#__PURE__*/ React.createElement("img", { src: `/${currentCorn}.jpg`, alt: `View of ${currentCorn}`, className: "w-full h-[300px] object-cover", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between p-4", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-red-500 text-2xl", onClick: ()=>handleLike(currentCorn), __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-heart", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }), " ", likes[currentCorn]), /*#__PURE__*/ React.createElement("span", { className: "text-gray-600 text-2xl", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-comment", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }), " ", comments[currentCorn].length)), /*#__PURE__*/ React.createElement("form", { onSubmit: (event)=>submitComment(event, currentCorn), className: "border-t border-gray-300 p-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "comment", placeholder: "Add a comment...", className: "p-2 border border-gray-300 rounded w-3/4", required: true, __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "ml-1 px-3 py-2 bg-blue-500 text-white font-bold rounded w-1/4", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Post")), /*#__PURE__*/ React.createElement("div", { className: "h-40 overflow-y-auto", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, comments[currentCorn].map((comment, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "p-2 border-b border-gray-300", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold mr-2", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, comment.username, ":"), " ", comment.text)))), /*#__PURE__*/ React.createElement("select", { className: "p-2 border border-gray-300 rounded bg-white mt-4", value: username, onChange: (e)=>setUsername(e.target.value), __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, "Select a username"), /*#__PURE__*/ React.createElement("option", { value: "farmerJoe", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, "farmerJoe"), /*#__PURE__*/ React.createElement("option", { value: "cornLover", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, "cornLover"), /*#__PURE__*/ React.createElement("option", { value: "fieldExplorer", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, "fieldExplorer"))); }