const MainComponent = ()=>{ const [favorites, setFavorites] = React.useState({}); const [search, setSearch] = React.useState(''); const toggleFavorite = (index)=>{ setFavorites((prev)=>({ ...prev, [index]: !prev[index] })); }; const emails = [ { sender: 'A', content: 'A', time: '10:24 AM' }, { sender: 'B', content: 'B', time: '9:14 AM' }, { sender: 'C', content: 'C', time: '8:45 AM' } ]; const renderItem = (item, index)=>{ const isFavorite = favorites[index]; return /*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center p-4 bg-white", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center w-12", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-full h-8 w-8 bg-gray-400 flex items-center justify-center text-white font-bold", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, item.sender)), /*#__PURE__*/ React.createElement("div", { className: "flex-grow pl-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm font-bold", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, item.sender), /*#__PURE__*/ React.createElement("div", { className: "text-xs", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, item.content)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-end", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, item.time), /*#__PURE__*/ React.createElement("i", { className: `fa${isFavorite ? 's' : 'r'} fa-star cursor-pointer text-lg ${isFavorite ? 'text-yellow-500' : 'text-gray-500'}`, onClick: ()=>toggleFavorite(index), __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }))); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col bg-white h-full", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center p-2", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "bg-white border-none focus:outline-none pr-2 text-sm", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "All"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Unread"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Starred")), /*#__PURE__*/ React.createElement("input", { className: "flex-grow border-none focus:outline-none ml-2 text-sm", placeholder: "Search mail", value: search, onChange: (e)=>setSearch(e.target.value), name: "search", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-user-circle text-lg ml-2", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-auto", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, emails.map(renderItem)), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-12 w-full bg-white flex justify-center py-3", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-pencil text-xl", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around p-3 absolute bottom-0 w-full bg-white", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-envelope text-xl", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Mail")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-video text-xl", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Meet")))); };