feat: [closes #53] display message timestamps

src/components/Message/Message.tsx

@@ -1,5 +1,6 @@
 import { HTMLAttributes } from 'react'
 import Box from '@mui/material/Box'
+import Tooltip from '@mui/material/Tooltip'
 import Typography, { TypographyProps } from '@mui/material/Typography'
 import Link, { LinkProps } from '@mui/material/Link'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
@@ -72,6 +73,8 @@ const componentMap = {
   },
 }
 
+const spaceNeededForSideDateTooltip = 850
+
 export const Message = ({ message, showAuthor, userId }: MessageProps) => {
   let backgroundColor: string
 
@@ -96,6 +99,17 @@ export const Message = ({ message, showAuthor, userId }: MessageProps) => {
           <PeerNameDisplay>{message.authorId}</PeerNameDisplay>
         </Typography>
       )}
+      <Tooltip
+        placement={
+          window.innerWidth >= spaceNeededForSideDateTooltip ? 'left' : 'top'
+        }
+        title={String(
+          Intl.DateTimeFormat(undefined, {
+            dateStyle: 'short',
+            timeStyle: 'short',
+          }).format(message.timeSent)
+        )}
+      >
         <Box
           sx={{
             color: 'primary.contrastText',
@@ -117,6 +131,7 @@ export const Message = ({ message, showAuthor, userId }: MessageProps) => {
             {message.text}
           </Markdown>
         </Box>
+      </Tooltip>
     </Box>
   )
 }