email actions in single

src/pages/received/Components/MessageUnread.tsx

@@ -0,0 +1,25 @@
+import { SmsNotification } from 'iconsax-react'
+import { FC, useState } from 'react'
+import { useMarkAsRead, useMarkAsUnread } from '../hooks/useEmailData'
+import { useParams } from 'react-router-dom'
+
+const MessageUnread: FC = () => {
+
+    const [isRead, setIsRead] = useState<boolean>(true)
+    const { id, mailbox } = useParams<{ id: string, mailbox: string }>()
+    const { mutate: markAsRead } = useMarkAsRead()
+    const { mutate: markAsUnread } = useMarkAsUnread()
+
+    return (
+        <SmsNotification onClick={() => {
+            if (isRead) {
+                markAsUnread({ messageId: id || '', mailbox: mailbox || '' })
+            } else {
+                markAsRead({ messageId: id || '', mailbox: mailbox || '' })
+            }
+            setIsRead(!isRead)
+        }} size={18} variant={isRead ? 'Outline' : 'Bold'} color='black' className='xl:block hidden' />
+    )
+}
+
+export default MessageUnread