function MainComponent({ username, message, timeSent, isRead }) { const readStatusIcon = isRead ? "fas fa-envelope-open-text text-green-500" : "fas fa-envelope text-red-500"; const readStatusText = isRead ? "Read" : "Unread"; return /*#__PURE__*/ React.createElement("div", { className: "flex items-center p-4 space-x-4 bg-gray-100 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${readStatusIcon} text-xl`, __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-md font-roboto text-black", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, username), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-gray-600", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, message)), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-gray-800", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, timeSent), /*#__PURE__*/ React.createElement("span", { className: "px-2 py-1 text-xs font-roboto text-white bg-blue-500 rounded-md", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, readStatusText)); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4 p-4", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { username: "User123", message: "Hey, can you send me the report?", timeSent: "10:45 AM", isRead: false, __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { username: "JaneDoe", message: "Meeting is rescheduled to 3 PM.", timeSent: "Yesterday", isRead: true, __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { username: "TeamAnnouncement", message: "Please, attend the stand-up at 9 AM tomorrow.", timeSent: "Last Week", isRead: false, __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this })); }