function MainComponent({ leftMenuItems, mainContent }) { return /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[430px] p-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, leftMenuItems.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 p-4 mb-2", __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, item.subItems.map((subItem, subIndex)=>/*#__PURE__*/ React.createElement("div", { key: subIndex, className: "p-2 border-b", __source: { fileName: "", lineNumber: 10, columnNumber: 17 }, __self: this }, subItem)))))), /*#__PURE__*/ React.createElement("div", { className: "w-[1290px] p-4", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-primary p-8 mb-4", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "Header Image"), mainContent.map((section, sectionIndex)=>/*#__PURE__*/ React.createElement("div", { key: sectionIndex, className: "mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, section.title), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, section.items.map((item, itemIndex)=>/*#__PURE__*/ React.createElement("div", { key: itemIndex, className: "p-4 border", __source: { fileName: "", lineNumber: 23, columnNumber: 17 }, __self: this }, item))))), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-4", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-primary text-white py-2 px-4", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "More")))); } function StoryComponent() { const leftMenuItems = [ { title: "Menu 1", subItems: [ "Link 1", "Link 2", "Link 3" ] }, { title: "Event", subItems: [ "Event 1", "Event 2" ] }, { title: "Works", subItems: [ "Work 1", "Work 2", "Work 3" ] }, { title: "Voice", subItems: [ "Voice 1", "Voice 2", "Voice 3" ] }, { title: "Staff", subItems: [ "Staff 1", "Staff 2", "Staff 3" ] } ]; const mainContent = [ { title: "Event", items: [ "Event 1 Details", "Event 2 Details" ] }, { title: "Works", items: [ "Work 1 Details", "Work 2 Details", "Work 3 Details" ] }, { title: "Voice", items: [ "Voice 1 Details", "Voice 2 Details", "Voice 3 Details" ] }, { title: "Staff", items: [ "Staff 1 Details", "Staff 2 Details", "Staff 3 Details" ] } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { leftMenuItems: leftMenuItems, mainContent: mainContent, __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this })); }