63 lines
1.3 KiB
JavaScript
63 lines
1.3 KiB
JavaScript
import React from "react";
|
|
import '../../styles/Messages.css'
|
|
import styled from "styled-components";
|
|
import DefaultPic from '../../assets/profile.jpg'
|
|
|
|
const UserChat = styled.div `
|
|
padding: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
color: white;
|
|
cursor: pointer;
|
|
|
|
&:hover{
|
|
background-color: #3e3c61;
|
|
}
|
|
`
|
|
|
|
const SideSpan = styled.span`
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
`
|
|
|
|
const SideP = styled.p`
|
|
font-size: 14px;
|
|
color: lightgray;
|
|
margin-left: 15px;
|
|
`
|
|
|
|
function Chats(){
|
|
return (
|
|
<div className="chat">
|
|
<UserChat>
|
|
<img className="pic-user" src={DefaultPic} alt="User" />
|
|
<div className="infoSideBar">
|
|
<SideSpan>Dummy</SideSpan>
|
|
<SideP>yo</SideP>
|
|
</div>
|
|
</UserChat>
|
|
<UserChat>
|
|
<img className="pic-user" src={DefaultPic} alt="User" />
|
|
<div className="infoSideBar">
|
|
<SideSpan>Dummy</SideSpan>
|
|
<SideP>yo</SideP>
|
|
</div>
|
|
</UserChat><UserChat>
|
|
<img className="pic-user" src={DefaultPic} alt="User" />
|
|
<div className="infoSideBar">
|
|
<SideSpan>Dummy</SideSpan>
|
|
<SideP>yo</SideP>
|
|
</div>
|
|
</UserChat><UserChat>
|
|
<img className="pic-user" src={DefaultPic} alt="User" />
|
|
<div className="infoSideBar">
|
|
<SideSpan>Dummy</SideSpan>
|
|
<SideP>yo</SideP>
|
|
</div>
|
|
</UserChat>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Chats |