import { Avatar, Button } from '@material-ui/core'
import styled from 'styled-components'
import React from 'react'
import ChatIcon from '@mui/icons-material/Chat';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import SearchIcon from '@mui/icons-material/Search';
import { IconButton } from '@mui/material';
import * as EmailValidator from 'email-validator';
function Sidebar() {
const createChat = () =>{
const inputEmail = prompt
('Enter an email address for the user you wish to chat with')
};
if (!inputEmail) return null;
if (EmailValidator.validate(inputEmail)){
// we need to add chat in db colection
}
return (
<Container>
<Header>
<UserAvatar />
<IconsContainer>
<IconButton>
<ChatIcon />
</IconButton>
<IconButton>
<MoreVertIcon />
</IconButton>
</IconsContainer>
</Header>
<Search>
<SearchIcon />
<SearchInput placeholder='Search from chats'/>
</Search>
<SidebarButton onClick={createChat}>Start new chat</SidebarButton>
{/* list of chats */}
</Container>
)
}
export default Sidebar
const Container = styled.div``;
const Header = styled.div`
display: flex;
position: sticky;
top: 0;
z-index: 1;
justify-content: space-between;
align-items: center;
padding: 15px;
height: 80px;
border: 1px solid whitesmoke;
`;
const Search = styled.div`
display: flex;
align-items: center;
padding: 20px;
border-radius: 2px;
`;
const UserAvatar = styled(Avatar)`
cursor: pointer;
`;
const IconsContainer = styled.div``;
const SearchInput = styled.input`
outline-width: 0;
border: none;
flex: 1;
`;
const SidebarButton = styled(Button)`
width: 100%;
&&&{
border-top: 1px solid whitesmoke;
border-bottom: 1px solid whitesmoke;
}
`;