function HauntedSpotsJapan({ prefectures, onPrefectureClick }) { return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, prefectures.map((prefecture)=>{ return /*#__PURE__*/ React.createElement("div", { key: prefecture.name, className: "cursor-pointer hover:scale-110 transition-transform ease-in-out duration-300 absolute", style: { top: prefecture.top, left: prefecture.left }, onClick: ()=>onPrefectureClick(prefecture.name), __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#ff0000] text-2xl font-roboto", __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, prefecture.name)); })); } function HauntedSpotsJapanStory() { const prefectures = [ { name: '東京', top: '20%', left: '40%' }, { name: '大阪', top: '30%', left: '60%' }, { name: '京都', top: '50%', left: '50%' } ]; const handlePrefectureClick = (name)=>{ console.log(`${name} clicked`); }; return /*#__PURE__*/ React.createElement("div", { className: "relative w-[800px] h-[600px] bg-[#0A0A0A]", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(HauntedSpotsJapan, { prefectures: prefectures, onPrefectureClick: handlePrefectureClick, __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this })); } function ClickableMapRegions({ regions, onClick }) { return /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, regions.map((region)=>/*#__PURE__*/ React.createElement("div", { key: region.name, className: "cursor-pointer hover:scale-110 transition-transform ease-in-out duration-300", style: { top: region.top, left: region.left }, onClick: ()=>onClick(region.name), __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#ff0000] text-2xl font-roboto", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, region.name)))); } function ClickableMapRegionsStory() { const handlePrefectureClick = (name)=>alert(`Clicked on: ${name}`); const regions = [ { name: '東京', top: '20%', left: '40%' }, { name: '大阪', top: '30%', left: '60%' }, { name: '京都', top: '50%', left: '50%' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ClickableMapRegions, { regions: regions, onClick: handlePrefectureClick, __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this })); } function MainComponent() { const prefectures = [ { name: '東京', top: '20%', left: '40%' }, { name: '大阪', top: '30%', left: '60%' }, { name: '京都', top: '50%', left: '50%' } ]; const [selectedPrefecture, setSelectedPrefecture] = React.useState(null); const handlePrefectureClick = (name)=>{ setSelectedPrefecture(name); }; return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full flex flex-col items-center bg-[#0A0A0A] text-[#FFFFFF] font-roboto p-4", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(HauntedSpotsJapan, { prefectures: prefectures, onPrefectureClick: handlePrefectureClick, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ClickableMapRegions, { regions: prefectures, onClick: handlePrefectureClick, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), selectedPrefecture && /*#__PURE__*/ React.createElement("div", { id: "expanded-map", className: "mt-8 text-[#ff0000] text-3xl", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, selectedPrefecture)); }