function MainComponent() { const [reviews, setReviews] = React.useState([ { bookTitle: "Book Title", authorName: "Author Name", rating: 3.5, reviewText: "This is a review of the book..." } ]); const handleSubmit = (e)=>{ e.preventDefault(); const form = e.target; const newReview = { bookTitle: form.bookTitle.value, authorName: form.authorName.value, rating: parseFloat(form.rating.value), reviewText: form.review.value }; setReviews([ ...reviews, newReview ]); form.reset(); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] text-white min-h-screen flex flex-col items-center p-4 font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full flex justify-between items-center py-4 px-6 bg-[#1f1f1f] shadow-md", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "BookReview"), /*#__PURE__*/ React.createElement("div", { className: "text-lg", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow w-full max-w-4xl mt-8", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-6", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Latest Reviews"), reviews.map((review, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 bg-[#1f1f1f] rounded-lg shadow-md mb-6", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, review.bookTitle), /*#__PURE__*/ React.createElement("p", { className: "text-lg italic", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "by ", review.authorName), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mt-2", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-yellow-500", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, [ ...Array(Math.floor(review.rating)) ].map((e, i)=>/*#__PURE__*/ React.createElement("i", { key: i, className: "fas fa-star", __source: { fileName: "", lineNumber: 43, columnNumber: 21 }, __self: this })), review.rating % 1 !== 0 && /*#__PURE__*/ React.createElement("i", { className: "fas fa-star-half-alt", __source: { fileName: "", lineNumber: 45, columnNumber: 47 }, __self: this }), [ ...Array(5 - Math.ceil(review.rating)) ].map((e, i)=>/*#__PURE__*/ React.createElement("i", { key: i, className: "far fa-star", __source: { fileName: "", lineNumber: 47, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, review.rating, "/5")), /*#__PURE__*/ React.createElement("p", { className: "mt-4", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, review.reviewText)))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Submit Your Review"), /*#__PURE__*/ React.createElement("form", { className: "bg-[#1f1f1f] p-6 rounded-lg shadow-md", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-2", htmlFor: "bookTitle", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "Book Title"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 bg-[#303030] text-white rounded", id: "bookTitle", name: "bookTitle", type: "text", required: true, __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-2", htmlFor: "authorName", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, "Author Name"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 bg-[#303030] text-white rounded", id: "authorName", name: "authorName", type: "text", required: true, __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-2", htmlFor: "rating", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, "Rating"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 bg-[#303030] text-white rounded", id: "rating", name: "rating", required: true, __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "5", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, "5 - Excellent"), /*#__PURE__*/ React.createElement("option", { value: "4", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, "4 - Good"), /*#__PURE__*/ React.createElement("option", { value: "3", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, "3 - Average"), /*#__PURE__*/ React.createElement("option", { value: "2", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, "2 - Poor"), /*#__PURE__*/ React.createElement("option", { value: "1", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, "1 - Terrible"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-2", htmlFor: "review", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, "Review"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 bg-[#303030] text-white rounded", id: "review", name: "review", rows: "4", required: true, __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "w-full p-2 bg-[#0066cc] text-white font-medium rounded hover:bg-[#005bb5]", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "Submit Review")))), /*#__PURE__*/ React.createElement("footer", { className: "w-full bg-[#1f1f1f] p-4 mt-8 text-center", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, "© 2023 BookReview. All rights reserved.")); }