function MainComponent() { const [flightLog, setFlightLog] = React.useState({ date: '', from: '', to: '', departureTime: '', arrivalTime: '', flightDuration: '' }); const handleInputChange = (event)=>{ const { name, value } = event.target; setFlightLog((prevLog)=>({ ...prevLog, [name]: value })); if (name === 'departureTime' || name === 'arrivalTime') { if (flightLog.departureTime && flightLog.arrivalTime) { const depTime = new Date(`1970/01/01 ${flightLog.departureTime}`); const arrTime = new Date(`1970/01/01 ${flightLog.arrivalTime}`); const duration = new Date(arrTime - depTime); const pad = (num)=>num.toString().padStart(2, '0'); setFlightLog((prevLog)=>({ ...prevLog, flightDuration: `${pad(duration.getUTCHours())}:${pad(duration.getUTCMinutes())}` })); } } }; const handleSave = ()=>{ const textData = JSON.stringify(flightLog); const blob = new Blob([ textData ], { type: 'text/plain' }); const url = window.URL.createObjectURL(blob); const link = document.createElement('a'); link.download = 'flightlog.txt'; link.href = url; link.click(); }; const handleLoad = (event)=>{ const fileReader = new FileReader(); fileReader.onloadend = ()=>{ const content = fileReader.result; setFlightLog(JSON.parse(content)); }; fileReader.readAsText(event.target.files[0]); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f8ff] flex justify-center items-center", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg w-full max-w-2xl", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-lg font-bold text-[#121212] mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Flight Log Editor"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-2", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-2 mb-3", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-2 mb-3", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-2 mb-3", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-2 mb-3", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-2 mb-3", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "file", accept: ".txt", className: "hidden", id: "loadFileInput", onChange: handleLoad, __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "loadFileInput", className: "px-4 py-2 bg-[#007aff] text-white font-medium rounded-md cursor-pointer hover:bg-[#0056b3]", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Load File"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleSave, className: "px-4 py-2 bg-purple-600 text-white font-medium rounded-md cursor-pointer hover:bg-purple-500", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Save File")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this })))); }