function PageSearchComponent({ placeholder, pages, onSearchChange, onPageSelect }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-[#303030be] p-4 overflow-auto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: placeholder, className: "w-full p-2 mb-4", onChange: onSearchChange, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), pages.map((page)=>/*#__PURE__*/ React.createElement("div", { key: page.id, __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>onPageSelect(page.name), className: "w-full text-left font-roboto hover:bg-[#e0e0e0] p-2", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, page.name)))); } function PageSearchComponentStory() { const pages = [ { id: 1, name: 'Home' }, { id: 2, name: 'About' }, { id: 3, name: 'Contact' } ]; const handleSearchChange = (e)=>{ console.log(e.target.value); }; const handlePageSelection = (pageName)=>()=>{ console.log(pageName); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PageSearchComponent, { placeholder: "Search pages", pages: pages, onSearchChange: handleSearchChange, onPageSelect: handlePageSelection, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this })); } function PageInformationComponent({ dateCreated, author, lastEdited, lastEditor }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#303030be] p-4 h-screen overflow-y-auto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-arial font-bold text-[12px] uppercase m-4 leading-1", style: { color: 'rgb(163, 163, 163)' }, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Page information"), /*#__PURE__*/ React.createElement("hr", { className: "my-1 mx-4 border-none h-[1px] border-t border-dashed", style: { borderTop: '1px dashed', color: 'rgb(163, 163, 163)' }, __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "font-arial font-bold text-[12px] uppercase m-4 leading-1", style: { color: 'rgb(163, 163, 163)' }, __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-calendar", "aria-hidden": "true", __source: { fileName: "", lineNumber: 7, columnNumber: 12 }, __self: this }), " Date created: ", dateCreated), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-user", "aria-hidden": "true", __source: { fileName: "", lineNumber: 8, columnNumber: 12 }, __self: this }), " Author: ", author), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-pencil-alt", "aria-hidden": "true", __source: { fileName: "", lineNumber: 9, columnNumber: 12 }, __self: this }), " Last edited: ", lastEdited), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-edit", "aria-hidden": "true", __source: { fileName: "", lineNumber: 10, columnNumber: 12 }, __self: this }), " Edited last: ", lastEditor))); } function PageInformationComponentStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PageInformationComponent, { dateCreated: "Sept 1, 2023", author: "Jane Doe", lastEdited: "Oct 1, 2023", lastEditor: "John Doe", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent() { const pages = [ { id: 1, name: 'Home' }, { id: 2, name: 'About' }, { id: 3, name: 'Contact' } ]; const handleSearchChange = (e)=>{ console.log(e.target.value); }; const handlePageSelection = (pageName)=>{ console.log(pageName); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex", style: { background: "url('/background.jpg')", backgroundColor: "#303030be", backgroundBlendMode: "overlay" }, __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(PageSearchComponent, { placeholder: "Search pages", pages: pages, onSearchChange: handleSearchChange, onPageSelect: handlePageSelection, __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-1/2", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(PageInformationComponent, { dateCreated: "Sept 1, 2023", author: "Jane Doe", lastEdited: "Oct 1, 2023", lastEditor: "John Doe", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }))); }