function MainComponent() { const [topic, setTopic] = React.useState(""); const [prediction, setPrediction] = React.useState(""); const [endDate, setEndDate] = React.useState(""); const [confidence, setConfidence] = React.useState(50); const [reasoning, setReasoning] = React.useState(""); const [submitSuccess, setSubmitSuccess] = React.useState(false); const handleSubmit = async (event)=>{ event.preventDefault(); const data = { topic, prediction, endDate, confidence: `${confidence}%`, reasoning }; // Simulate sending data to Google Sheets and set success setTimeout(()=>setSubmitSuccess(true), 1000); }; const handleReset = ()=>{ setTopic(""); setPrediction(""); setEndDate(""); setConfidence(50); setReasoning(""); setSubmitSuccess(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-[#56ab2f] to-[#a8e063] p-4", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, !submitSuccess ? /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-xl bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "topic", className: "block mb-2 font-roboto text-lg", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "Topic"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "topic", value: topic, onChange: (e)=>setTopic(e.target.value), required: true, className: "w-full p-2 border-2 border-gray-200 rounded", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "prediction", className: "block mb-2 font-roboto text-lg", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "Prediction"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "prediction", value: prediction, onChange: (e)=>setPrediction(e.target.value), required: true, className: "w-full p-2 border-2 border-gray-200 rounded", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "end-date", className: "block mb-2 font-roboto text-lg", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "End Date and Time"), /*#__PURE__*/ React.createElement("input", { type: "datetime-local", name: "end-date", value: endDate, onChange: (e)=>setEndDate(e.target.value), required: true, className: "w-full p-2 border-2 border-gray-200 rounded", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "confidence", className: "block mb-2 font-roboto text-lg", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Confidence"), /*#__PURE__*/ React.createElement("input", { type: "range", name: "confidence", min: "0", max: "100", value: confidence, onChange: (e)=>setConfidence(e.target.value), className: "w-full h-2 bg-gray-200 rounded-full cursor-pointer appearance-none", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-xs font-roboto", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, "0%"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, "100%"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "reasoning", className: "block mb-2 font-roboto text-lg", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "Reasoning"), /*#__PURE__*/ React.createElement("textarea", { name: "reasoning", value: reasoning, onChange: (e)=>setReasoning(e.target.value), rows: "4", required: true, className: "w-full p-2 border-2 border-gray-200 rounded", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-[#4caf50] hover:bg-[#43a047] text-white font-roboto rounded shadow", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "Submit Prediction")) : /*#__PURE__*/ React.createElement("div", { className: "bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg p-6 rounded-lg shadow-lg text-center", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "Prediction submitted successfully."), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleReset, className: "py-2 px-6 bg-[#4caf50] hover:bg-[#43a047] text-white font-roboto rounded shadow", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, "Make another prediction"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .MainComponent-enter { animation-name: fadeIn; animation-duration: 1s; } `)); }