FINAL-PROJECT-FRONT/src/components/HomePage/RightBar/ChatBar/Messages/MessageLeftAudio/index.tsx

import { makeStyles } from "@material-ui/core/styles";

import { timeStamp } from '../../../../../../helpers'
import AudioPlayer from "../../Players/AudioPlayer";

const useStyles = makeStyles({
  container: {
      display: "flex",
      justifyContent: "flex-start",
      width:'auto',
      maxWidth: '80%',
      marginBottom:15
  },
  playerWrapper: {
    position: 'relative',
    width: 300
  }, 
  time: {
      position: "absolute",
      fontSize: ".65em",
      fontWeight:600,
      bottom: -5,
      right: -5,
      color: '#ffffff',
      backgroundColor: '#3a3a3a',
      padding: 3,
      borderRadius:5
    },
});
interface IMessageLeftAudio {
  audioUrl:string,
  updatedAt: string,
  audio:any,
  setAudio: any,
  i:number
}

const MessageLeftAudio = ({ audioUrl,updatedAt,audio,setAudio,i }:IMessageLeftAudio) => {
  const classes = useStyles();

  return (
    <div className={classes.container}>
      <div className={classes.playerWrapper}>
        <div className={classes.time}>{timeStamp(updatedAt)}</div>
        <AudioPlayer audio={audio} setAudio={setAudio} i={i} src={`http://localhost:3000/${audioUrl}`}/>
      </div>
    </div>    
)};

export  default  MessageLeftAudio