function MainComponent() { const [selectedShop, setSelectedShop] = React.useState(null); const [shops, setShops] = React.useState([ { id: 1, name: "Shop A", latitude: 40, longitude: -74, description: "Description for Shop A" }, { id: 2, name: "Shop B", latitude: 34, longitude: -118, description: "Description for Shop B" } ]); const handleMapClick = (shop)=>{ setSelectedShop(shop); }; const handleListClick = (shop)=>{ setSelectedShop(shop); }; const handleRegisterShop = ()=>{ // Logic for registering a new shop (omitted as actual implementation might vary) }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex flex-col items-center font-roboto", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-between items-center p-4 bg-[#f8f9fa]", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "Shop Map"), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-blue-500 text-white rounded", onClick: handleRegisterShop, __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Register Shop")), /*#__PURE__*/ React.createElement("div", { className: "w-full flex flex-1", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/4 bg-[#ffffff] overflow-auto", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, shops.map((shop)=>/*#__PURE__*/ React.createElement("li", { key: shop.id, onClick: ()=>handleListClick(shop), className: "p-2 cursor-pointer hover:bg-[#f1f1f1]", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, shop.name)))), /*#__PURE__*/ React.createElement("div", { className: "w-2/4 flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, selectedShop && /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#ffffff] shadow-md rounded w-[300px]", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, selectedShop.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, selectedShop.description))), /*#__PURE__*/ React.createElement("div", { className: "w-1/4 bg-[#e9ecef]", id: "map", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, shops.map((shop)=>{ const top = `${shop.latitude - 30}%`; const left = `${shop.longitude + 130}%`; return /*#__PURE__*/ React.createElement("div", { key: shop.id, onClick: ()=>handleMapClick(shop), className: "text-[20px] cursor-pointer absolute", style: { top, left }, __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "📍"); })))); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 74, columnNumber: 1 }, __self: this }, ` #map { position: relative; } `);