function StationNameInput({ name, placeholder }) { return /*#__PURE__*/ React.createElement("input", { type: "text", name: name, placeholder: placeholder, className: "p-2 border border-gray-300 rounded mb-2 w-full", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function StationNameInputStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StationNameInput, { name: "station2", placeholder: "駅名2", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function StationNameInput2({ name, placeholder }) { return /*#__PURE__*/ React.createElement("input", { type: "text", name: name, placeholder: placeholder, className: "p-2 border border-gray-300 rounded mb-2 w-full", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function StationNameInput2Story() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StationNameInput2, { name: "station2", placeholder: "駅名2", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function StationNameInputField({ name, placeholder }) { return /*#__PURE__*/ React.createElement("input", { type: "text", name: name, placeholder: placeholder, className: "p-2 border border-gray-300 rounded mb-2 w-full", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function StationNameInputFieldStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StationNameInputField, { name: "station1", placeholder: "駅名1", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StationNameInputField, { name: "station2", placeholder: "駅名2", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function MainComponent() { const [station1, setStation1] = React.useState(""); const [station2, setStation2] = React.useState(""); const [middleStation, setMiddleStation] = React.useState(""); const findMiddleStation = ()=>{ if (station1 && station2) { setMiddleStation(`Middle station between ${station1} and ${station2}`); } }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StationNameInputField, { name: "station1", placeholder: "駅名1", onChange: (e)=>setStation1(e.target.value), __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StationNameInput2, { name: "station2", placeholder: "駅名2", onChange: (e)=>setStation2(e.target.value), __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-blue-500 text-white rounded", onClick: findMiddleStation, __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, "中間地点を探す"), middleStation && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, middleStation)); }