function MainComponent() { const [hours, setHours] = React.useState(""); const [minutes, setMinutes] = React.useState(""); const [seconds, setSeconds] = React.useState(""); const [distance, setDistance] = React.useState(""); const [distanceUnit, setDistanceUnit] = React.useState("km"); const [convertedTimes, setConvertedTimes] = React.useState({}); const [showResults, setShowResults] = React.useState(false); const handleHoursChange = (e)=>{ setHours(e.target.value); }; const handleMinutesChange = (e)=>{ setMinutes(e.target.value); }; const handleSecondsChange = (e)=>{ setSeconds(e.target.value); }; const handleDistanceChange = (e)=>{ if (e.target.value === "other") { setDistance(""); } else { setDistanceUnit("km"); setDistance(e.target.value); } }; const handleCustomDistanceChange = (e)=>{ setDistance(e.target.value); }; const handleDistanceUnitChange = (e)=>{ setDistanceUnit(e.target.value); }; const convertTime = (e)=>{ e.preventDefault(); setShowResults(true); const targetDistances = [ 5, 10, 21.1, 42.2 ]; let totalTimeSeconds = +hours * 3600 + +minutes * 60 + +seconds; totalTimeSeconds = distanceUnit === "miles" ? totalTimeSeconds / 1.60934 : totalTimeSeconds; const factor = 1.06; let results = {}; targetDistances.forEach((distance)=>{ const converted = (totalTimeSeconds * (distance / +distance) ** factor).toFixed(0); const hoursC = Math.floor(converted / 3600); const minutesC = Math.floor((converted - hoursC * 3600) / 60); const secondsC = converted - hoursC * 3600 - minutesC * 60; results[`${distance}km`] = `${hoursC ? `${hoursC}:` : ''}${minutesC}:${secondsC < 10 ? `0${secondsC}` : secondsC}`; }); setConvertedTimes(results); }; const handleBackClick = ()=>{ setShowResults(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-center items-center h-screen space-y-4", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, !showResults ? /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: convertTime, __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-medium text-gray-900", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "Race Time"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "hours", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", placeholder: "HH", onChange: handleHoursChange, value: hours, __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "minutes", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", placeholder: "MM", onChange: handleMinutesChange, value: minutes, __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "seconds", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", placeholder: "SS", onChange: handleSecondsChange, value: seconds, __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "distanceSelect", className: "block mb-2 text-sm font-medium text-gray-900", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Race Distance"), /*#__PURE__*/ React.createElement("select", { id: "distanceSelect", name: "distanceSelect", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", onChange: handleDistanceChange, value: distance, __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "5", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, "5km"), /*#__PURE__*/ React.createElement("option", { value: "10", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, "10km"), /*#__PURE__*/ React.createElement("option", { value: "21.1", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, "Half Marathon (21.1km)"), /*#__PURE__*/ React.createElement("option", { value: "42.2", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "Marathon (42.2km)"), /*#__PURE__*/ React.createElement("option", { value: "other", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, "Other Distance")), distance === "" && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("input", { type: "number", name: "customDistance", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 mt-2", placeholder: "Enter distance", onChange: handleCustomDistanceChange, __source: { fileName: "", lineNumber: 89, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "distanceUnit", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 mt-2", onChange: handleDistanceUnitChange, value: distanceUnit, __source: { fileName: "", lineNumber: 90, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "km", __source: { fileName: "", lineNumber: 91, columnNumber: 19 }, __self: this }, "Kilometers"), /*#__PURE__*/ React.createElement("option", { value: "miles", __source: { fileName: "", lineNumber: 92, columnNumber: 19 }, __self: this }, "Miles")))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, "Convert")) : /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, Object.entries(convertedTimes).map(([distance, time])=>/*#__PURE__*/ React.createElement("div", { key: distance, className: "text-lg font-medium", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, distance, ": ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 103, columnNumber: 27 }, __self: this }, time))), /*#__PURE__*/ React.createElement("button", { onClick: handleBackClick, className: "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, "Back"))); }