function MainComponent({ alertInfo, regions }) { return /*#__PURE__*/ React.createElement("div", { className: "font-roboto p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "国民保護に関する情報"), /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-lg", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, alertInfo), /*#__PURE__*/ React.createElement("img", { src: "./japan-map.png", alt: "日本の地図", className: "w-full mt-4 relative", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex justify-center items-center pointer-events-none", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, regions.map((region, index)=>{ const regionStyles = region.alert ? "bg-yellow-500 flashing" : "bg-transparent"; return region.alert && /*#__PURE__*/ React.createElement("div", { key: index, className: `absolute w-[20px] h-[20px] rounded-full ${regionStyles}`, style: { top: `${region.coordinates[0]}%`, left: `${region.coordinates[1]}%` }, __source: { fileName: "", lineNumber: 15, columnNumber: 17 }, __self: this }); }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4 mt-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, regions.map((region)=>/*#__PURE__*/ React.createElement("div", { key: region.name, className: "p-4 bg-gray-200", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, region.name), region.alert && /*#__PURE__*/ React.createElement("div", { className: "text-sm text-red-700", __source: { fileName: "", lineNumber: 29, columnNumber: 30 }, __self: this }, "Jアラート発表地域")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, ` @keyframes flash { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .flashing { animation: flash 1s infinite; } `)); } function StoryComponent() { const alertInfo = "Some alert information here"; const regions = [ { name: "Hokkaido", alert: true, coordinates: [ 20, 35 ] }, { name: "Tokyo", alert: false, coordinates: [ 50, 65 ] }, { name: "Osaka", alert: true, coordinates: [ 60, 55 ] }, { name: "Fukuoka", alert: false, coordinates: [ 80, 45 ] } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-10", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { alertInfo: alertInfo, regions: regions, __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this })); }