function MainComponent({ bannerImages, comedians, events }) { const bannerItems = bannerImages.map((image, index)=>{ const style = { backgroundImage: `url(${image})` }; return /*#__PURE__*/ React.createElement("div", { key: index, className: "w-[300px] h-[200px] bg-center bg-cover", style: style, __source: { fileName: "", lineNumber: 4, columnNumber: 12 }, __self: this }); }); const comedianItems = comedians.map((comedian, index)=>{ const style = { backgroundImage: `url(${comedian.image})` }; return /*#__PURE__*/ React.createElement("div", { key: index, className: "w-[150px] h-[200px] bg-center bg-cover", style: style, __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white text-center font-roboto", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, comedian.name)); }); const eventItems = events.map((event, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 border rounded", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, event.date), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, event.location), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, event.comedian))); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 overflow-x-auto", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, bannerItems), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", className: "w-full p-2 border rounded", placeholder: "芸人やイベントを検索...", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4 grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, comedianItems), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, eventItems)); } function StoryComponent() { const bannerImages = [ 'image1.jpg', 'image2.jpg', 'image3.jpg' ]; const comedians = [ { name: '芸人A', image: 'comedian1.jpg' }, { name: '芸人B', image: 'comedian2.jpg' }, { name: '芸人C', image: 'comedian3.jpg' } ]; const events = [ { date: '2023-10-01', location: 'Tokyo', comedian: '芸人A' }, { date: '2023-10-02', location: 'Osaka', comedian: '芸人B' }, { date: '2023-10-03', location: 'Nagoya', comedian: '芸人C' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { bannerImages: bannerImages, comedians: comedians, events: events, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this })); }