480 lines
12 KiB
TypeScript
480 lines
12 KiB
TypeScript
import React, { useCallback, useRef } from 'react';
|
|
|
|
import { Container } from '@mui/system';
|
|
import {
|
|
Avatar,
|
|
Badge,
|
|
Box,
|
|
Divider,
|
|
Fab,
|
|
Grid,
|
|
IconButton,
|
|
Input,
|
|
List,
|
|
ListItem,
|
|
ListItemAvatar,
|
|
ListItemButton,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
ListSubheader,
|
|
Menu,
|
|
Paper,
|
|
Stack,
|
|
Tooltip,
|
|
Typography,
|
|
} from '@mui/material';
|
|
import NirvanaLogo from './NirvanaLogo';
|
|
import { blueGrey } from '@mui/material/colors';
|
|
import {
|
|
FiActivity,
|
|
FiHeadphones,
|
|
FiInbox,
|
|
FiLogOut,
|
|
FiMonitor,
|
|
FiMoreVertical,
|
|
FiPlay,
|
|
FiSearch,
|
|
FiSun,
|
|
FiWind,
|
|
} from 'react-icons/fi';
|
|
import KeyboardShortcutLabel from './KeyboardShortcutLabel';
|
|
import { useSnackbar } from 'notistack';
|
|
import { useKey } from 'react-use';
|
|
import NirvanaAvatar from './NirvanaAvatar';
|
|
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import useAuth from '../providers/AuthProvider';
|
|
|
|
export default function Terminal() {
|
|
const { enqueueSnackbar } = useSnackbar();
|
|
|
|
return (
|
|
<Grid container spacing={0}>
|
|
<Grid
|
|
item
|
|
xs={4}
|
|
sx={{
|
|
zIndex: 2,
|
|
backgroundColor: blueGrey[50],
|
|
boxShadow: 3,
|
|
borderRight: `1px solid ${blueGrey}`,
|
|
}}
|
|
>
|
|
<Stack
|
|
direction={'column'}
|
|
spacing={1}
|
|
sx={{
|
|
p: 2,
|
|
height: 'inherit',
|
|
}}
|
|
>
|
|
<Navbar />
|
|
|
|
<SecondNavbar />
|
|
|
|
<Conversations />
|
|
</Stack>
|
|
</Grid>
|
|
|
|
<Grid item xs={8} sx={{ backgroundColor: 'white', display: 'flex', flexDirection: 'column' }}>
|
|
<Stack
|
|
direction={'row'}
|
|
sx={{
|
|
py: 2,
|
|
px: 2,
|
|
borderBottom: '1px solid',
|
|
borderBottomColor: blueGrey[100],
|
|
WebkitAppRegion: 'drag',
|
|
cursor: 'pointer',
|
|
}}
|
|
alignItems={'center'}
|
|
justifyContent={'flex-start'}
|
|
>
|
|
<Stack spacing={2} direction={'row'} alignItems={'center'}>
|
|
<Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/2.jpg" />
|
|
|
|
<Typography color={'GrayText'} variant="overline">
|
|
{'Viet Phan'}
|
|
</Typography>
|
|
</Stack>
|
|
|
|
<Box sx={{ ml: 'auto' }}>
|
|
<IconButton size="small">
|
|
<FiMoreVertical />
|
|
</IconButton>
|
|
</Box>
|
|
</Stack>
|
|
|
|
<Container maxWidth={false} sx={{ position: 'relative', flex: 1 }}>
|
|
<Container maxWidth="xs">
|
|
<Stack
|
|
justifyContent={'flex-start'}
|
|
alignItems={'center'}
|
|
sx={{
|
|
pt: 2,
|
|
}}
|
|
>
|
|
<Typography variant="caption">yesterday</Typography>
|
|
|
|
<Paper elevation={1} sx={{ p: 1, width: '100%' }}>
|
|
<Stack direction={'row'} alignItems="center">
|
|
<Stack spacing={2} direction={'row'} alignItems={'center'}>
|
|
<Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/2.jpg" />
|
|
|
|
<Typography color={'GrayText'} variant="overline">
|
|
{'Viet Phan'}
|
|
</Typography>
|
|
</Stack>
|
|
|
|
<Box
|
|
sx={{
|
|
ml: 'auto',
|
|
color: 'GrayText',
|
|
}}
|
|
>
|
|
<FiPlay />
|
|
</Box>
|
|
</Stack>
|
|
</Paper>
|
|
</Stack>
|
|
|
|
<Stack
|
|
justifyContent={'flex-start'}
|
|
alignItems={'center'}
|
|
sx={{
|
|
pt: 2,
|
|
}}
|
|
>
|
|
<Typography variant="caption">today</Typography>
|
|
|
|
<Paper elevation={8} sx={{ p: 1, width: '100%' }}>
|
|
<Stack direction={'row'} alignItems="center">
|
|
<Stack spacing={2} direction={'row'} alignItems={'center'}>
|
|
<Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/2.jpg" />
|
|
|
|
<Typography color={'GrayText'} variant="overline">
|
|
{'Viet Phan'}
|
|
</Typography>
|
|
</Stack>
|
|
|
|
<Box
|
|
sx={{
|
|
ml: 'auto',
|
|
color: 'GrayText',
|
|
}}
|
|
>
|
|
<FiPlay />
|
|
</Box>
|
|
</Stack>
|
|
</Paper>
|
|
</Stack>
|
|
|
|
<Stack
|
|
justifyContent={'flex-start'}
|
|
alignItems={'center'}
|
|
sx={{
|
|
pt: 2,
|
|
}}
|
|
>
|
|
<Typography variant="caption">right now</Typography>
|
|
|
|
<Paper elevation={24} sx={{ p: 1, width: '100%' }}>
|
|
<Stack direction={'row'} alignItems="center">
|
|
<Stack spacing={2} direction={'row'} alignItems={'center'}>
|
|
<Avatar
|
|
alt={'Arjun Patel'}
|
|
src="https://lh3.googleusercontent.com/ogw/ADea4I6TRqnIptWNP25-iXdusoAHafj-cUPYkO53xKT2_H0=s64-c-mo"
|
|
/>
|
|
|
|
<Typography color={'GrayText'} variant="overline">
|
|
{'Arjun Patel'}
|
|
</Typography>
|
|
</Stack>
|
|
|
|
<Box
|
|
sx={{
|
|
ml: 'auto',
|
|
color: 'GrayText',
|
|
}}
|
|
>
|
|
<FiPlay />
|
|
</Box>
|
|
</Stack>
|
|
</Paper>
|
|
</Stack>
|
|
</Container>
|
|
|
|
<Box
|
|
sx={{
|
|
position: 'absolute',
|
|
zIndex: 10,
|
|
bottom: 0,
|
|
right: 0,
|
|
padding: 3,
|
|
}}
|
|
>
|
|
<Fab color="primary" aria-label="add" size="medium">
|
|
<FiSun />
|
|
</Fab>
|
|
</Box>
|
|
</Container>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
}
|
|
|
|
const Navbar = () => {
|
|
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
|
const open = Boolean(anchorEl);
|
|
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
|
|
setAnchorEl(event.currentTarget);
|
|
};
|
|
const handleClose = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
const { logout } = useAuth();
|
|
|
|
return (
|
|
<>
|
|
<Stack
|
|
direction="row"
|
|
justifyContent={'flex-start'}
|
|
alignItems={'center'}
|
|
sx={{
|
|
WebkitAppRegion: 'drag',
|
|
cursor: 'pointer',
|
|
pb: 1,
|
|
}}
|
|
>
|
|
<NirvanaLogo />
|
|
|
|
<Stack
|
|
spacing={1}
|
|
direction={'row'}
|
|
alignItems={'center'}
|
|
sx={{
|
|
ml: 'auto',
|
|
mr: 1,
|
|
color: 'GrayText',
|
|
}}
|
|
>
|
|
<Tooltip title="Sound configuration">
|
|
<IconButton color="inherit" size="small">
|
|
<FiHeadphones />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip title="Desktop modes">
|
|
<IconButton color="inherit" size="small">
|
|
<FiMonitor />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip title="Flow state">
|
|
<IconButton color="inherit" size="small">
|
|
<FiWind />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Stack>
|
|
<IconButton
|
|
onClick={handleClick}
|
|
size="small"
|
|
sx={{ ml: 2, borderRadius: 1 }}
|
|
aria-controls={open ? 'account-menu' : undefined}
|
|
aria-haspopup="true"
|
|
aria-expanded={open ? 'true' : undefined}
|
|
>
|
|
<Avatar
|
|
alt={'Arjun Patel'}
|
|
src="https://lh3.googleusercontent.com/ogw/ADea4I6TRqnIptWNP25-iXdusoAHafj-cUPYkO53xKT2_H0=s64-c-mo"
|
|
/>
|
|
</IconButton>
|
|
</Stack>
|
|
|
|
<Menu
|
|
anchorEl={anchorEl}
|
|
id="account-menu"
|
|
open={open}
|
|
onClose={handleClose}
|
|
onClick={handleClose}
|
|
PaperProps={{
|
|
elevation: 0,
|
|
sx: {
|
|
overflow: 'visible',
|
|
filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
|
|
mt: 1.5,
|
|
'& .MuiAvatar-root': {
|
|
width: 32,
|
|
height: 32,
|
|
ml: -0.5,
|
|
mr: 1,
|
|
},
|
|
'&:before': {
|
|
content: '""',
|
|
display: 'block',
|
|
position: 'absolute',
|
|
top: 0,
|
|
right: 14,
|
|
width: 10,
|
|
height: 10,
|
|
bgcolor: 'background.paper',
|
|
transform: 'translateY(-50%) rotate(45deg)',
|
|
zIndex: 0,
|
|
},
|
|
},
|
|
}}
|
|
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
|
|
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
|
|
>
|
|
<MenuItem>
|
|
<Avatar /> Profile
|
|
</MenuItem>
|
|
<MenuItem>
|
|
<Avatar /> My account
|
|
</MenuItem>
|
|
|
|
<Divider />
|
|
|
|
<MenuItem onClick={logout}>
|
|
<ListItemIcon>
|
|
<FiLogOut />
|
|
</ListItemIcon>
|
|
<Typography color="warning">Logout</Typography>
|
|
</MenuItem>
|
|
</Menu>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const searchShortcut = 'Shift';
|
|
const SecondNavbar = () => {
|
|
const { enqueueSnackbar } = useSnackbar();
|
|
|
|
const searchRef = useRef<HTMLInputElement>(null);
|
|
|
|
const onSearch = useCallback(() => {
|
|
enqueueSnackbar('search focused');
|
|
if (searchRef?.current) searchRef.current.focus();
|
|
}, []);
|
|
|
|
useKey('Shift', onSearch);
|
|
|
|
return (
|
|
<Stack
|
|
direction={'row'}
|
|
sx={{
|
|
position: 'relative',
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
bgcolor: blueGrey[100],
|
|
borderRadius: 1,
|
|
px: 1,
|
|
py: 0.5,
|
|
}}
|
|
alignItems={'center'}
|
|
spacing={1}
|
|
>
|
|
<FiSearch style={{ color: blueGrey[500] }} />
|
|
|
|
<Input placeholder={'Find or start a conversation'} inputRef={searchRef} />
|
|
|
|
<KeyboardShortcutLabel label="Shift" />
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
const Conversations = () => {
|
|
return (
|
|
<>
|
|
<List
|
|
sx={{
|
|
pt: 2,
|
|
}}
|
|
subheader={
|
|
<ListSubheader>
|
|
<FiActivity />
|
|
<Typography variant="subtitle2"> Priority</Typography>
|
|
</ListSubheader>
|
|
}
|
|
>
|
|
<ListItem>
|
|
<ListItemButton selected={true}>
|
|
<ListItemAvatar>
|
|
<Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/2.jpg" />
|
|
</ListItemAvatar>
|
|
|
|
<ListItemText primary="Viet" />
|
|
|
|
<Typography variant={'caption'}>20 sec</Typography>
|
|
</ListItemButton>
|
|
</ListItem>
|
|
|
|
<ListItem>
|
|
<ListItemButton>
|
|
<ListItemAvatar>
|
|
<NirvanaAvatar
|
|
avatars={[
|
|
{ alt: 'Arjun Patel', src: 'https://mui.com/static/images/avatar/3.jpg' },
|
|
]}
|
|
/>
|
|
</ListItemAvatar>
|
|
|
|
<ListItemText primary="Agnes" />
|
|
|
|
<Typography variant={'caption'}>34 min ago</Typography>
|
|
</ListItemButton>
|
|
</ListItem>
|
|
</List>
|
|
|
|
<Divider />
|
|
|
|
<List
|
|
sx={{
|
|
pt: 2,
|
|
}}
|
|
subheader={
|
|
<ListSubheader>
|
|
<FiInbox />
|
|
<Typography variant="subtitle2"> Inbox</Typography>
|
|
</ListSubheader>
|
|
}
|
|
>
|
|
<ListItem>
|
|
<ListItemButton sx={{ opacity: 0.5 }}>
|
|
<ListItemAvatar>
|
|
<Avatar
|
|
sx={{
|
|
filter: `grayscale(1)`,
|
|
}}
|
|
alt={'Arjun Patel'}
|
|
src="https://mui.com/static/images/avatar/5.jpg"
|
|
/>
|
|
</ListItemAvatar>
|
|
|
|
<ListItemText secondary="Jeremy Leon" sx={{ color: blueGrey[300] }} />
|
|
|
|
<Badge color="primary" badgeContent=" " variant="dot"></Badge>
|
|
</ListItemButton>
|
|
</ListItem>
|
|
|
|
<ListItem>
|
|
<ListItemButton sx={{ opacity: 0.5 }}>
|
|
<ListItemAvatar>
|
|
<Avatar
|
|
sx={{
|
|
filter: `grayscale(1)`,
|
|
}}
|
|
alt={'Arjun Patel'}
|
|
src="https://mui.com/static/images/avatar/4.jpg"
|
|
/>
|
|
</ListItemAvatar>
|
|
|
|
<ListItemText secondary="James Lin" sx={{ color: blueGrey[300] }} />
|
|
|
|
<Typography variant={'caption'}>2 hours ago</Typography>
|
|
</ListItemButton>
|
|
</ListItem>
|
|
</List>
|
|
</>
|
|
);
|
|
};
|