function MainComponent() { const [tornadoData, setTornadoData] = React.useState({ location: '', intensity: '', date: '' }); const [isTracking, setIsTracking] = React.useState(false); const handleInputChange = (event)=>{ const { name, value } = event.target; setTornadoData({ ...tornadoData, [name]: value }); }; const handleSubmit = (event)=>{ event.preventDefault(); setIsTracking(true); // Simulate a delay to mimic tracking action setTimeout(()=>{ setIsTracking(false); }, 2000); // Logic to submit the tornado data... }; const trackingStatusText = isTracking ? 'Tracking...' : 'Track Tornado'; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f2f2f2]", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, "Tornado Tracker"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-sm", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "location", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "Location"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline font-roboto", name: "location", type: "text", value: tornadoData.location, onChange: handleInputChange, __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "intensity", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Intensity (e.g., F5)"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline font-roboto", name: "intensity", type: "text", value: tornadoData.intensity, onChange: handleInputChange, __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "date", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Date of Event"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline font-roboto", name: "date", type: "date", value: tornadoData.date, onChange: handleInputChange, __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `${isTracking ? 'bg-gray-500' : 'bg-blue-500 hover:bg-blue-700'} text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline font-roboto`, type: "submit", disabled: isTracking, __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, trackingStatusText))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, ` body { font-family: 'Roboto', sans-serif; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `), /*#__PURE__*/ React.createElement("div", { className: `mt-8 ${isTracking ? 'block' : 'hidden'}`, __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 border-b-2 border-blue-500 rounded-full animate-spin", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }))); }