function MainComponent() { const [rating, setRating] = React.useState(0); const [postText, setPostText] = React.useState(""); const [posts, setPosts] = React.useState([]); const handleRatingChange = (newRating)=>{ setRating(newRating); }; const handlePostTextChange = (event)=>{ setPostText(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); const newPost = { id: Date.now(), text: postText, rating }; setPosts([ ...posts, newPost ]); setRating(0); setPostText(""); }; const StarRating = ()=>{ const stars = [ ...Array.from({ length: 5 }) ].map((_, index)=>{ const ratingValue = index + 1; return /*#__PURE__*/ React.createElement("label", { key: ratingValue, __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "rating", value: ratingValue, onClick: ()=>handleRatingChange(ratingValue), className: "hidden", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: `fas fa-star cursor-pointer transition-colors duration-200 ${ratingValue <= rating ? 'text-yellow-500' : 'text-gray-300'}`, __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this })); }); return /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 36, columnNumber: 12 }, __self: this }, stars); }; const PostForm = ()=>{ return /*#__PURE__*/ React.createElement("form", { className: "mb-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 border border-gray-300 rounded-lg font-roboto", rows: "4", placeholder: "What's on your mind?", name: "postText", value: postText, onChange: handlePostTextChange, __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-2", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(StarRating, { __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#4CAF50] text-white rounded-lg font-roboto", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Post"))); }; const Post = ({ text, rating })=>/*#__PURE__*/ React.createElement("div", { className: "p-4 mb-2 bg-white rounded-lg shadow", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-1 text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, text), /*#__PURE__*/ React.createElement("div", { className: "text-yellow-500 font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, Array(rating).fill().map((_, i)=>/*#__PURE__*/ React.createElement("i", { key: i, className: "fas fa-star", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this })))); const NavigationMenu = ()=>/*#__PURE__*/ React.createElement("div", { className: "bg-blue-500 p-4 text-white font-roboto", __source: { fileName: "", lineNumber: 72, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, "MyApp"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-white px-3 py-1", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("button", { className: "text-white px-3 py-1", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Profile"), /*#__PURE__*/ React.createElement("button", { className: "text-white px-3 py-1", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "Settings")))); const Footer = ()=>/*#__PURE__*/ React.createElement("div", { className: "bg-black p-4 text-white text-center font-roboto", __source: { fileName: "", lineNumber: 84, columnNumber: 5 }, __self: this }, "© 2023 MyApp. All rights reserved."); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-between min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 89, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NavigationMenu, { __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "px-4 pb-4 flex-1", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(PostForm, { __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, posts.map((post)=>/*#__PURE__*/ React.createElement(Post, { key: post.id, text: post.text, rating: post.rating, __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement(Footer, { __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this })); }