function MainComponent() { const posts = [ { id: 1, type: "text", username: "اسم المستخدم 1", userHandle: "@username1", content: "هذا نص محكاة لمنشور على فيسبوك", profilePic: "./profile-pic-1.png" }, { id: 2, type: "image", username: "اسم المستخدم 2", userHandle: "@username2", content: "./post-image-1.png", profilePic: "./profile-pic-2.png" }, { id: 3, type: "video", username: "اسم المستخدم 3", userHandle: "@username3", content: "https://www.example.com/video.mp4", profilePic: "./profile-pic-3.png" } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F0F2F5] flex flex-col items-center", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-white rounded-lg overflow-hidden shadow-lg", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white py-4 px-6 flex items-center border-b border-[#CED0D4]", __source: { fileName: "", lineNumber: 11, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars text-[#65676B] text-xl", __source: { fileName: "", lineNumber: 12, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-[#050505] text-2xl font-roboto ml-4", __source: { fileName: "", lineNumber: 13, columnNumber: 21 }, __self: this }, "الصفحة الرئيسية")), /*#__PURE__*/ React.createElement("div", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 15, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-3", __source: { fileName: "", lineNumber: 16, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./profile-pic.png", alt: "Profile picture of a Facebook user", className: "w-[48px] h-[48px] rounded-full", __source: { fileName: "", lineNumber: 17, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "post", rows: "3", placeholder: "ما الذي تفكر فيه؟", className: "bg-[#F0F2F5] border border-[#CED0D4] text-[#050505] text-lg w-full p-2 resize-none rounded-lg", __source: { fileName: "", lineNumber: 18, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 20, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 text-[#606770]", __source: { fileName: "", lineNumber: 21, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-image text-xl", __source: { fileName: "", lineNumber: 22, columnNumber: 29 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "far fa-smile text-xl", __source: { fileName: "", lineNumber: 23, columnNumber: 29 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt text-xl", __source: { fileName: "", lineNumber: 24, columnNumber: 29 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-[#1877F2] text-white py-2 px-4 rounded-full", __source: { fileName: "", lineNumber: 26, columnNumber: 25 }, __self: this }, "نشر"))), /*#__PURE__*/ React.createElement("div", { className: "border-t border-[#CED0D4]", __source: { fileName: "", lineNumber: 29, columnNumber: 17 }, __self: this }, posts.map((post)=>/*#__PURE__*/ React.createElement("div", { key: post.id, className: "p-6 border-b border-[#CED0D4] last:border-b-0", __source: { fileName: "", lineNumber: 31, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 32, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: post.profilePic, alt: `Profile picture of ${post.username}`, className: "w-[48px] h-[48px] rounded-full", __source: { fileName: "", lineNumber: 33, columnNumber: 33 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 34, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#050505] font-bold", __source: { fileName: "", lineNumber: 35, columnNumber: 37 }, __self: this }, post.username), /*#__PURE__*/ React.createElement("p", { className: "text-[#606770]", __source: { fileName: "", lineNumber: 36, columnNumber: 37 }, __self: this }, post.userHandle), post.type === "text" && /*#__PURE__*/ React.createElement("p", { className: "text-[#050505] mt-2", __source: { fileName: "", lineNumber: 37, columnNumber: 62 }, __self: this }, post.content), post.type === "image" && /*#__PURE__*/ React.createElement("img", { src: post.content, alt: `Post image by ${post.username}`, className: "mt-2 max-h-[400px] rounded-lg", __source: { fileName: "", lineNumber: 38, columnNumber: 63 }, __self: this }), post.type === "video" && /*#__PURE__*/ React.createElement("video", { controls: true, className: "mt-2 max-h-[400px] w-full rounded-lg", __source: { fileName: "", lineNumber: 39, columnNumber: 63 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: post.content, type: "video/mp4", __source: { fileName: "", lineNumber: 40, columnNumber: 41 }, __self: this }), "Your browser does not support the video tag."))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, ` body { font-family: 'Roboto', sans-serif; } `)); }