function PostButtonDesign({ buttonText, buttonBackground, buttonTextColor, buttonRounded, marginTop }) { return /*#__PURE__*/ React.createElement("button", { className: `${marginTop} p-2 ${buttonBackground} ${buttonTextColor} ${buttonRounded} w-full`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, buttonText); } function PostButtonDesignStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PostButtonDesign, { buttonText: "Post", buttonBackground: "bg-[#ff0000]", buttonTextColor: "text-[#000000]", buttonRounded: "rounded-full", marginTop: "mt-2", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-md p-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-lg text-[#1c1e21]", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, "Socl Media App"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "search", name: "search", placeholder: "Search", className: "border p-2 rounded-md", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "ml-2 p-2 bg-[#006aff] text-white rounded-md", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, "Search")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bell text-[#606770]", __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-comments ml-4 text-[#606770]", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-users ml-4 text-[#606770]", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto flex flex-wrap p-4 gap-4", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-full md:w-1/4", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-[#1c1e21]", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "Profile"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./profile.jpg", alt: "User profile photo", className: "w-20 h-20 rounded-full mx-auto", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-center font-medium", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, "User Name"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 text-center", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, "Bio information here"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-[#1c1e21]", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Groups"))), /*#__PURE__*/ React.createElement("section", { className: "w-full md:w-1/2", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "post", placeholder: "What's on your mind?", className: "w-full border p-2 rounded-md", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(PostButtonDesign, { buttonText: "Post", buttonBackground: "bg-[#006aff]", buttonTextColor: "text-white", buttonRounded: "rounded-md", marginTop: "mt-2", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("aside", { className: "w-full md:w-1/4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-[#1c1e21]", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Explore")))), /*#__PURE__*/ React.createElement("footer", { className: "bg-white p-4 mt-4", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto text-center text-sm text-gray-600", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "© 2023 Socl Media App. All rights reserved."))); }