function MainComponent() { const [selectedPrefecture, setSelectedPrefecture] = React.useState(null); const [locations, setLocations] = React.useState([]); const [showPopup, setShowPopup] = React.useState(false); const [selectedLocation, setSelectedLocation] = React.useState(null); const [showEditModal, setShowEditModal] = React.useState(false); const [showMenu, setShowMenu] = React.useState(false); const handlePinClick = (location)=>{ setSelectedLocation(location); setShowPopup(true); }; const handleListItemClick = (location)=>{ setSelectedLocation(location); setShowEditModal(true); }; const handleSave = (newLocation)=>{ setLocations([ ...locations, newLocation ]); setShowEditModal(false); }; const handleDelete = (locationToDelete)=>{ setLocations(locations.filter((location)=>location !== locationToDelete)); setShowEditModal(false); }; const toggleMenu = ()=>{ setShowMenu(!showMenu); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-blue-600 text-white p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-sans", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "日本旅行マップ"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-white text-blue-600 px-4 py-2 rounded", onClick: toggleMenu, __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "メニュー"), showMenu && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-48 bg-white rounded-md shadow-xl z-20", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "編集画面"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "設定")))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow flex flex-col md:flex-row", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-2/3 bg-gray-200 p-4", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4 h-full relative", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/japan-map.png", alt: "日本地図", className: "w-full h-full object-contain", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }), locations.map((location, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: `absolute w-4 h-4 rounded-full ${location.visited ? 'bg-green-500' : 'bg-red-500'}`, style: { left: `${location.x}%`, top: `${location.y}%` }, onClick: ()=>handlePinClick(location), __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/3 bg-gray-100 p-4", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 font-sans", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, selectedPrefecture ? `${selectedPrefecture}の登録情報` : '登録情報リスト'), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, locations.filter((location)=>!selectedPrefecture || location.prefecture === selectedPrefecture).map((location, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "bg-white p-2 rounded shadow cursor-pointer hover:bg-gray-50", onClick: ()=>handleListItemClick(location), __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold font-sans", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, location.name)))))), showPopup && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg max-w-md", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: selectedLocation.photo, alt: selectedLocation.name, className: "w-full h-48 object-cover rounded mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "absolute top-2 right-2 text-white", onClick: ()=>setShowPopup(false), __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this })))), showEditModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg max-w-md w-full", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 font-sans", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "情報編集"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: "場所の名前", className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", name: "photo", className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "comment", placeholder: "コメント", className: "w-full p-2 border rounded h-24", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "date", name: "visitDate", className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-blue-600 text-white px-4 py-2 rounded", onClick: ()=>handleSave({}), __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }, "保存"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-red-600 text-white px-4 py-2 rounded", onClick: ()=>handleDelete(selectedLocation), __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this }, "削除")))))); }