WIP

src/components/chat/Message.tsx

@@ -7,6 +7,7 @@ export interface MessageProps {
   ack: boolean;
   isSender: boolean;
   rxTime: Date;
+  senderName: string;
 }
 
 export const Message = ({
@@ -14,6 +15,7 @@ export const Message = ({
   ack,
   isSender,
   rxTime,
+  senderName,
 }: MessageProps): JSX.Element => {
   return (
     <div
@@ -27,16 +29,19 @@ export const Message = ({
           colors={['#213435', '#46685B', '#648A64', '#A6B985', '#E1E3AC']}
         />
       </div>
-      <div
-        className={`relative max-w-3/4 px-3 py-2 rounded-t-lg mb-2 ${
-          isSender
-            ? 'bg-gray-500 text-gray-50 rounded-br-lg'
-            : 'bg-primary text-blue-50 rounded-bl-lg'
-        } ${ack ? 'animate-none' : 'animate-pulse'}`}
-      >
-        <div className="min-w-4 leading-5">{message}</div>
+      <div>
+        <div
+          className={`relative max-w-3/4 px-3 py-2 rounded-t-lg ${
+            isSender
+              ? 'bg-gray-500 text-gray-50 rounded-br-lg'
+              : 'bg-primary text-blue-50 rounded-bl-lg'
+          } ${ack ? 'animate-none' : 'animate-pulse'}`}
+        >
+          <div className="min-w-4 leading-5">{message}</div>
+        </div>
+        <div className="text-xs text-gray-600">{senderName}</div>
       </div>
-      <div className="mt-auto mb-2 text-xs font-medium text-secondary mr-3 dark:text-gray-200">
+      <div className="mt-auto mb-4 text-xs font-medium text-secondary mr-3 dark:text-gray-200">
         {rxTime.getHours()}:{rxTime.getMinutes()}
       </div>
     </div>