function MainComponent() { const [view, setView] = React.useState('list'); // 'list', 'details', 'filter' const [selectedProperty, setSelectedProperty] = React.useState(null); const [searchQuery, setSearchQuery] = React.useState(''); const [filter, setFilter] = React.useState({ location: '', price: '' }); const properties = [ { id: 1, name: 'サンプル不動産 1', location: '東京都渋谷区', image: '/house-sample1.jpg', description: '明るい雰囲気の不動産', price: '¥50,000,000' }, { id: 2, name: 'サンプル不動産 2', location: '大阪府大阪市', image: '/house-sample2.jpg', description: '庭付き一戸建て不動産', price: '¥45,000,000' }, { id: 3, name: 'サンプル不動産 3', location: '福岡県福岡市', image: '/house-sample3.jpg', description: '新築マンション不動産', price: '¥35,000,000' } ]; const displayedProperties = properties.filter((property)=>{ return property.name.includes(searchQuery) || property.location.includes(filter.location) && property.price.includes(filter.price); }); const handleSelectProperty = (property)=>{ setSelectedProperty(property); setView('details'); }; const handleSearch = (e)=>{ e.preventDefault(); setView('list'); }; const handleInputChange = (e)=>{ setSearchQuery(e.target.value); }; const handleFilterChange = (e)=>{ const { name, value } = e.target; setFilter((prevFilter)=>({ ...prevFilter, [name]: value })); }; const showFilter = ()=>{ setView('filter'); }; const showList = ()=>{ setView('list'); setSelectedProperty(null); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#374151] p-6 flex justify-between items-center shadow-md", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white text-3xl font-roboto", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "不動産検索アプリ"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#10B981] text-white rounded-lg font-roboto shadow-lg hover:bg-[#059669]", onClick: showFilter, __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "絞り込み")), /*#__PURE__*/ React.createElement("main", { className: "p-6", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, view === 'list' && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex flex-wrap gap-4 items-center justify-center", onSubmit: handleSearch, __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "query", placeholder: "検索...", value: searchQuery, onChange: handleInputChange, className: "p-2 w-full sm:w-auto border border-gray-300 rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#3B82F6] text-white rounded-lg font-roboto shadow-lg hover:bg-[#2563EB]", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, "検索")), /*#__PURE__*/ React.createElement("section", { className: "mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, displayedProperties.map((property)=>/*#__PURE__*/ React.createElement("div", { key: property.id, className: "bg-white rounded-xl p-6 shadow-md cursor-pointer hover:shadow-lg transition-shadow", onClick: ()=>handleSelectProperty(property), __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: property.image, alt: property.description, className: "w-full h-[200px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 66, columnNumber: 21 }, __self: this }, property.name), /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-gray-700", __source: { fileName: "", lineNumber: 67, columnNumber: 21 }, __self: this }, property.location), /*#__PURE__*/ React.createElement("p", { className: "mt-1 font-semibold text-gray-900", __source: { fileName: "", lineNumber: 68, columnNumber: 21 }, __self: this }, property.price)))))), view === 'details' && selectedProperty && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl p-6 shadow-md", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "mb-4 px-4 py-2 bg-[#EF4444] text-white rounded-lg font-roboto hover:bg-[#DC2626]", onClick: showList, __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "戻る"), /*#__PURE__*/ React.createElement("img", { src: selectedProperty.image, alt: selectedProperty.description, className: "w-full h-[400px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, selectedProperty.name), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-gray-700", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, selectedProperty.location), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-semibold text-gray-900", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, selectedProperty.price), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, selectedProperty.description))), view === 'filter' && /*#__PURE__*/ React.createElement("form", { className: "flex flex-wrap gap-4 items-center justify-center", onSubmit: handleSearch, __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "location", placeholder: "場所", value: filter.location, onChange: handleFilterChange, className: "p-2 border border-gray-300 rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "price", placeholder: "価格帯", value: filter.price, onChange: handleFilterChange, className: "p-2 border border-gray-300 rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#10B981] text-white rounded-lg font-roboto shadow-lg hover:bg-[#059669]", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "絞り込み検索")))); }