function MainComponent({ guest, restaurant, notifications }) { const ratings = guest.ratings.map((rating, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-col p-4 border-b-2 border-[#e0e0e0]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, rating.category), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-md", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, rating.score), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-sm text-[#666666]", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, rating.comment))); const invitations = restaurant.invitations.map((invite, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-col p-4 border-b-2 border-[#e0e0e0]", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, invite.restaurantName), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-md", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, invite.date), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-sm text-[#666666]", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, invite.details))); const notificationsList = notifications.map((notification, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-col p-4 border-b-2 border-[#e0e0e0]", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, notification.message))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full p-6 bg-white", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px]", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6 p-4 bg-[#f7f7f7] rounded shadow", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl mb-2", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, guest.name, "'s Profile"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-md mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, guest.description), /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-2", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Ratings"), ratings), /*#__PURE__*/ React.createElement("div", { className: "mb-6 p-4 bg-[#f7f7f7] rounded shadow", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-2", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Invitations"), invitations), /*#__PURE__*/ React.createElement("div", { className: "mb-6 p-4 bg-[#f7f7f7] rounded shadow", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-2", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Notifications"), notificationsList))); } function StoryComponent() { const guest = { name: "John Doe", description: "A passionate foodie who loves exploring new cuisines.", ratings: [ { category: "Behavior", score: "5 Stars", comment: "Very polite and respectful." }, { category: "Punctuality", score: "4 Stars", comment: "Arrived on time." }, { category: "Dining Etiquette", score: "5 Stars", comment: "Excellent table manners." } ] }; const restaurant = { invitations: [ { restaurantName: "Gourmet Heaven", date: "2023-10-15", details: "Exclusive tasting menu." }, { restaurantName: "La Fine Dine", date: "2023-10-20", details: "New menu launch event." } ] }; const notifications = [ { message: "You have a new invitation from Gourmet Heaven!" }, { message: "Your rating has been updated by La Fine Dine." } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full p-10 bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 72, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { guest: guest, restaurant: restaurant, notifications: notifications, __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this })); }

John Doe's Profile

Ratings

Invitations

Notifications