function MainComponent() { const [location, setLocation] = React.useState(''); const [numberOfPeople, setNumberOfPeople] = React.useState(''); const [startTime, setStartTime] = React.useState(''); const [endTime, setEndTime] = React.useState(''); const [results, setResults] = React.useState([]); const handleSearch = ()=>{ const fakeResults = [ { id: 1, name: 'Karaoke Box A', price: 2000 }, { id: 2, name: 'Karaoke Box B', price: 2500 } ]; setResults(fakeResults.sort((a, b)=>a.price - b.price)); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen py-10 bg-gray-100", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-xl mx-auto bg-white p-8 rounded shadow", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold font-roboto text-center mb-6", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "カラオケ料金を比較するサイト"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium font-roboto mb-2", htmlFor: "location", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "場所"), /*#__PURE__*/ React.createElement("input", { className: "w-full border p-2 rounded mb-4", type: "text", name: "location", id: "location", placeholder: "例: 東京", value: location, onChange: (e)=>setLocation(e.target.value), __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium font-roboto mb-2", htmlFor: "numberOfPeople", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "人数"), /*#__PURE__*/ React.createElement("input", { className: "w-full border p-2 rounded mb-4", type: "number", name: "numberOfPeople", id: "numberOfPeople", placeholder: "例: 4", value: numberOfPeople, onChange: (e)=>setNumberOfPeople(e.target.value), __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium font-roboto mb-2", htmlFor: "startTime", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "何時から"), /*#__PURE__*/ React.createElement("input", { className: "w-full border p-2 rounded mb-4", type: "time", name: "startTime", id: "startTime", value: startTime, onChange: (e)=>setStartTime(e.target.value), __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium font-roboto mb-2", htmlFor: "endTime", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "何時に"), /*#__PURE__*/ React.createElement("input", { className: "w-full border p-2 rounded mb-4", type: "time", name: "endTime", id: "endTime", value: endTime, onChange: (e)=>setEndTime(e.target.value), __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: handleSearch, className: "w-full bg-blue-500 text-white font-bold font-roboto py-2 rounded hover:bg-blue-600 transition duration-300", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "検索")), results.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "max-w-xl mx-auto mt-10 bg-white p-8 rounded shadow", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "検索結果"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, results.map((result)=>/*#__PURE__*/ React.createElement("li", { key: result.id, className: "mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, result.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-gray-500", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, "料金: ", result.price, "円")))))); }