123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- import { makeStyles } from "@material-ui/core/styles";
- import { Paper } from "@material-ui/core";
- import SendMessage from "./SendMessage";
- import MessageLeft from './Messages/MessageLeft'
- import MessageRight from './Messages/MessagesRight'
- import { chats } from "./chats";
- const useStyles = makeStyles({
- container: {
- width: "100%",
- height: "100%",
- maxWidth: "100%",
- maxHeight: "100%",
- display: "flex",
- alignItems: "center",
- alignContent:"center",
- flexDirection: "column",
- position: "relative",
- overflowY: "scroll",
- paddingTop: 60,
- paddingBottom:60
- },
- messagesBody: {
- width: "40%",
- height: "80%",
- },
- });
- const timestamp = new Date(2022, 3, 8).toLocaleString("en-US", {
- year:'numeric',
- month: 'short',
- day: 'numeric'
- });
- const ChatBar = () => {
- const classes = useStyles();
- return (
- <div className={classes.container}>
- <div className={classes.messagesBody}>
- {chats.map(({message,avatarUrl,name,lastName}:any,i) => {
- if (i % 2 == 0) {
- return (
- <MessageLeft
- message={message}
- timestamp={timestamp}
- avatarUrl={avatarUrl}
- name={name}
- lastName={lastName}
- />)
- } else {
- return (
- <MessageRight
- message={message}
- timestamp={timestamp}
- avatarUrl={avatarUrl}
- name={name}
- lastName={lastName}
- />)}})}
- </div>
- <SendMessage />
- </div>
- );
- }
- export default ChatBar
|