function MainComponent() { const [dailyDriving, setDailyDriving] = React.useState(''); const [weeklyDriving, setWeeklyDriving] = React.useState(''); const [fortnightlyDriving, setFortnightlyDriving] = React.useState(''); const [restPeriods, setRestPeriods] = React.useState(''); const handleSubmit = (event)=>{ event.preventDefault(); // Calculate logic here }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-5", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto bg-white shadow-md p-6 rounded-md", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-gray-900 mb-6 text-center font-roboto", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "Driver's Hours Rules Calculator"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "dailyDriving", className: "block text-gray-700 text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, "Daily Driving Hours"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "dailyDriving", name: "dailyDriving", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", placeholder: "Enter daily driving hours", value: dailyDriving, onChange: (e)=>setDailyDriving(e.target.value), __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "weeklyDriving", className: "block text-gray-700 text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "Weekly Driving Hours"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "weeklyDriving", name: "weeklyDriving", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", placeholder: "Enter weekly driving hours", value: weeklyDriving, onChange: (e)=>setWeeklyDriving(e.target.value), __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "fortnightlyDriving", className: "block text-gray-700 text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "Fortnightly Driving Hours"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "fortnightlyDriving", name: "fortnightlyDriving", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", placeholder: "Enter fortnightly driving hours", value: fortnightlyDriving, onChange: (e)=>setFortnightlyDriving(e.target.value), __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "restPeriods", className: "block text-gray-700 text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Rest Periods"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "restPeriods", name: "restPeriods", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", placeholder: "Enter number of rest periods", value: restPeriods, onChange: (e)=>setRestPeriods(e.target.value), __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Calculate")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 1s ease-in; } `)); }