1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162 |
- import { makeStyles } from "@material-ui/core/styles";
- import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
- import Avatar from '@mui/material/Avatar';
- const useStyles = makeStyles({
- avatarArrowWrapper: {
- position:'absolute',
- right: 20,
- top: '70vh',
- width: 56,
- },
- avatarArrow: {
- cursor:'pointer',
- '&:hover': {
- backgroundColor: 'rgb(41, 139, 231)',
- color: '#ffffff',
- }
- },
- listSeenIcon: {
- position: 'absolute',
- top: -8,
- left: 16,
- borderRadius: '50%',
- color: '#ffffff',
- border: 'none',
- height: 24,
- width: 24,
- textAlign: 'center',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- alignContent: 'center',
- fontSize: 12,
- zIndex: 10,
- cursor:'pointer',
- },
- });
- interface IArrowBack {
- isArrow: boolean,
- isNew: {new:number,mute:boolean},
- handleScrollTo: () => void,
- openPinned: boolean
- }
- const ArrowBack = ({ isArrow, handleScrollTo, isNew,openPinned }: IArrowBack) => {
- const classes = useStyles()
- return (
- <div className={classes.avatarArrowWrapper} style={{display: isArrow ? 'block' : 'none'}}>
- <button onClick={handleScrollTo} style={{display: isNew.new&&!openPinned ? 'block' : 'none',
- background: isNew.mute ? '#a7aaa7' : '#0ac40a'}}
- className={classes.listSeenIcon}>{isNew.new}</button>
- <Avatar onClick={handleScrollTo} className={classes.avatarArrow}
- sx={{backgroundColor: '#ffffff', width: 56, height: 56,color: '#6b6b6b'}}>
- <ArrowDownwardIcon fontSize="medium" />
- </Avatar>
- </div>
- )
- }
- export default ArrowBack
|