update message view

src/components/message.tsx

@@ -37,56 +37,62 @@ export default function Message({ data, onDelete }: IMessageProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  console.log({ data });
   return (
     <Paper
-        key={data.message}
-        shadow="xs"
-        radius="md"
-        p="xs"
-        withBorder
-        className={`flex items-center relative gap-3 w-full transition-all duration-300 ${
-          animation ? "animate-pulse !bg-blue-100" : ""
-        }`}
-      >
-        <div className="flex items-center w-full flex-col">
-          <Box className="flex items-center justify-between w-full">
-            <div className="text-xs font-bold">
-              {data.recipient.length > 0 && <span>{data.recipient}</span>}
-            </div>
-            <span className="text-xs">
-                {dayjs(data.time).format("HH:mm D/M/YYYY")}
-              </span>
-          </Box>
+      shadow="xs"
+      radius="md"
+      p="xs"
+      withBorder
+      className={`flex items-center relative gap-3 w-full transition-all duration-300 ${
+        animation ? "animate-pulse !bg-blue-100" : ""
+      }`}
+    >
+      <div className="flex items-center w-full flex-col">
+        <Box className="flex items-center justify-between w-full">
+          <div className="text-xs font-bold">
+            {data.recipient.length > 0 && <span>{data.recipient}</span>}
+          </div>
+          <span className="text-xs">
+            {dayjs(data.time).format("HH:mm D/M/YYYY")}
+          </span>
+        </Box>
 
-          <Box className="w-full flex items-center">
-            <Textarea
-              defaultValue={messageContent}
-              value={messageContent}
-              className="flex-1"
-              variant="unstyled"
-              readOnly
-            />
-            <Box className="flex gap-2">
-              <Tooltip label="View">
-                <ActionIcon onClick={toggle} variant="light" size="sm">
-                  {show ? <IconEyeOff size={16} /> : <IconEye size={16} />}
-                </ActionIcon>
-              </Tooltip>
-              <Tooltip label="Delete">
-                <ActionIcon
-                  onClick={onDelete}
-                  variant="light"
-                  size="sm"
-                  color="red"
-                >
-                  <IconTrash size={16} />
-                </ActionIcon>
-              </Tooltip>
-            </Box>
+        <Box className="w-full flex items-center">
+          <Textarea
+            defaultValue={messageContent}
+            value={messageContent}
+            className="flex-1"
+            variant="unstyled"
+            readOnly
+          />
+          <Box className="flex gap-2">
+            <Tooltip label="View">
+              <ActionIcon onClick={toggle} variant="light" size="sm">
+                {show ? <IconEyeOff size={16} /> : <IconEye size={16} />}
+              </ActionIcon>
+            </Tooltip>
+            <Tooltip label="Delete">
+              <ActionIcon
+                onClick={onDelete}
+                variant="light"
+                size="sm"
+                color="red"
+              >
+                <IconTrash size={16} />
+              </ActionIcon>
+            </Tooltip>
           </Box>
+        </Box>
 
-          <Box className="flex items-center justify-start w-full"><span className="text-xs text-left">From: {data.sender}</span></Box>
-        </div>
-      </Paper>
+        <Box className="flex items-center justify-start w-full">
+          <span className="text-xs text-left">
+            {data.sender.split("@")[0]
+              ? `From: ${data.sender.split("@")[0]}`
+              : ""}
+          </span>
+        </Box>
+      </div>
+    </Paper>
   );
 }