function MainComponent() { const [homeAddress, setHomeAddress] = React.useState(''); const [workAddress, setWorkAddress] = React.useState(''); const [results, setResults] = React.useState(null); const calculateRoutes = async (e)=>{ e.preventDefault(); setResults([ { duration: '45分', fare: '500円', stations: { from: '自宅最寄り駅A', to: '職場最寄り駅X' }, route: '自宅最寄り駅A → 中間駅B → 職場最寄り駅X' }, { duration: '50分', fare: '450円', stations: { from: '自宅最寄り駅A', to: '職場最寄り駅Y' }, route: '自宅最寄り駅A → 中間駅C → 職場最寄り駅Y' }, { duration: '55分', fare: '400円', stations: { from: '自宅最寄り駅B', to: '職場最寄り駅Z' }, route: '自宅最寄り駅B → 中間駅D → 中間駅E → 職場最寄り駅Z' } ].sort((a, b)=>parseInt(a.fare) - parseInt(b.fare))); }; const clearForm = ()=>{ setHomeAddress(''); setWorkAddress(''); setResults(null); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:flex", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8 w-full", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "uppercase tracking-wide text-sm text-indigo-500 font-semibold mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "通勤経路計算ツール"), /*#__PURE__*/ React.createElement("form", { onSubmit: calculateRoutes, className: "space-y-6", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "home", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, "自宅住所"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "home", id: "home", value: homeAddress, onChange: (e)=>setHomeAddress(e.target.value), required: true, className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "work", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, "職場住所"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "work", id: "work", value: workAddress, onChange: (e)=>setWorkAddress(e.target.value), required: true, className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "flex-1 py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, "ルートを計算する"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: clearForm, className: "flex-1 py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, "クリア"))), results && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg leading-6 font-medium text-gray-900", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }, "計算結果 (安い順)"), results.map((result, index)=>/*#__PURE__*/ React.createElement("dl", { key: index, className: "mt-4 border-t border-b border-gray-200 divide-y divide-gray-200", __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-3 flex justify-between text-sm font-medium", __source: { fileName: "", lineNumber: 97, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("dt", { className: "text-gray-500", __source: { fileName: "", lineNumber: 98, columnNumber: 23 }, __self: this }, "自宅最寄り駅"), /*#__PURE__*/ React.createElement("dd", { className: "text-gray-900", __source: { fileName: "", lineNumber: 99, columnNumber: 23 }, __self: this }, result.stations.from)), /*#__PURE__*/ React.createElement("div", { className: "py-3 flex justify-between text-sm font-medium", __source: { fileName: "", lineNumber: 101, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("dt", { className: "text-gray-500", __source: { fileName: "", lineNumber: 102, columnNumber: 23 }, __self: this }, "職場最寄り駅"), /*#__PURE__*/ React.createElement("dd", { className: "text-gray-900", __source: { fileName: "", lineNumber: 103, columnNumber: 23 }, __self: this }, result.stations.to)), /*#__PURE__*/ React.createElement("div", { className: "py-3 flex justify-between text-sm font-medium", __source: { fileName: "", lineNumber: 105, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("dt", { className: "text-gray-500", __source: { fileName: "", lineNumber: 106, columnNumber: 23 }, __self: this }, "所要時間"), /*#__PURE__*/ React.createElement("dd", { className: "text-gray-900", __source: { fileName: "", lineNumber: 107, columnNumber: 23 }, __self: this }, result.duration)), /*#__PURE__*/ React.createElement("div", { className: "py-3 flex justify-between text-sm font-medium", __source: { fileName: "", lineNumber: 109, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("dt", { className: "text-gray-500", __source: { fileName: "", lineNumber: 110, columnNumber: 23 }, __self: this }, "運賃"), /*#__PURE__*/ React.createElement("dd", { className: "text-gray-900", __source: { fileName: "", lineNumber: 111, columnNumber: 23 }, __self: this }, result.fare)), /*#__PURE__*/ React.createElement("div", { className: "py-3 text-sm font-medium", __source: { fileName: "", lineNumber: 113, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("dt", { className: "text-gray-500", __source: { fileName: "", lineNumber: 114, columnNumber: 23 }, __self: this }, "ルート"), /*#__PURE__*/ React.createElement("dd", { className: "text-gray-900 mt-1", __source: { fileName: "", lineNumber: 115, columnNumber: 23 }, __self: this }, result.route))))))))); }