12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- import List from '@mui/material/List';
- import { makeStyles } from '@material-ui/core'
- import AlertInfo from '../../../../../../reusableComponents/AlertInfo'
- import ForwardItem from './ForwardItem'
- import { TChats } from '../../../../../../../typescript/redux/chats/types';
- const useStyles = makeStyles({
- list: {
- width: '100%',
- maxHeight: '63vh',
- overflowY: 'scroll',
- '&::-webkit-scrollbar': {
- width: '0.4em'
- },
- '&::-webkit-scrollbar-track': {
- boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
- webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
- backgroundColor: '#eceeec',
- },
- '&::-webkit-scrollbar-thumb': {
- backgroundColor: '#ccc8c8',
- },
- "&::-webkit-scrollbar-thumb:focus": {
- backgroundColor: "#959595",
- },
- "&::-webkit-scrollbar-thumb:active": {
- backgroundColor: "#959595",
- },
- },
- })
- interface IForwardList {
- value: string,
- date:string,
- filteredAndSorted:TChats,
- handleForwardTo: (companionId: string) => void,
- }
- const ForwardList = ({ value,date,filteredAndSorted,handleForwardTo }: IForwardList) => {
- const classes = useStyles()
-
- return <>
- <List className={classes.list} component="nav"
- aria-label="main mailbox folders">
- {filteredAndSorted.map(({ name, lastName, avatarUrl, color, online, companionId, number }) =>
- <ForwardItem key={number} name={name} lastName={lastName}
- avatarUrl={avatarUrl} color={color} online={online}
- companionId={companionId} handleForwardTo={handleForwardTo} />)}
- {(value || date) && filteredAndSorted.length === 0 && <AlertInfo name={`Can not find Chat by request: ${value}`} />}
- {!value && !date && filteredAndSorted.length === 0 &&<AlertInfo name='You do not have any Chats yet!'/>}
- </List>
- </>
- }
- export default ForwardList
|