66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import { PropsWithChildren } from 'react'
|
|
import MuiDrawer from '@mui/material/Drawer'
|
|
import List from '@mui/material/List'
|
|
import Divider from '@mui/material/Divider'
|
|
import IconButton from '@mui/material/IconButton'
|
|
import ChevronRightIcon from '@mui/icons-material/ChevronRight'
|
|
import ListItemButton from '@mui/material/ListItemButton'
|
|
import Typography from '@mui/material/Typography'
|
|
|
|
import { PeerListHeader } from 'components/Shell/PeerListHeader'
|
|
import { PeerNameDisplay } from 'components/PeerNameDisplay'
|
|
|
|
import { Peer } from 'models/chat'
|
|
|
|
export const peerListWidth = 240
|
|
|
|
export interface PeerListProps extends PropsWithChildren {
|
|
userId: string
|
|
isPeerListOpen: boolean
|
|
onPeerListClose: () => void
|
|
peerList: Peer[]
|
|
}
|
|
|
|
export const PeerList = ({
|
|
userId,
|
|
isPeerListOpen,
|
|
onPeerListClose,
|
|
peerList,
|
|
}: PeerListProps) => {
|
|
return (
|
|
<MuiDrawer
|
|
sx={{
|
|
width: peerListWidth,
|
|
flexShrink: 0,
|
|
'& .MuiDrawer-paper': {
|
|
width: peerListWidth,
|
|
boxSizing: 'border-box',
|
|
},
|
|
}}
|
|
variant="persistent"
|
|
anchor="right"
|
|
open={isPeerListOpen}
|
|
>
|
|
<PeerListHeader>
|
|
<IconButton onClick={onPeerListClose} aria-label="Close peer list">
|
|
<ChevronRightIcon />
|
|
</IconButton>
|
|
</PeerListHeader>
|
|
<Divider />
|
|
<List>
|
|
<ListItemButton disableRipple={true}>
|
|
<Typography>
|
|
<PeerNameDisplay>{userId}</PeerNameDisplay> (you)
|
|
</Typography>
|
|
</ListItemButton>
|
|
{peerList.map((peer: Peer) => (
|
|
<ListItemButton key={peer.peerId} disableRipple={true}>
|
|
<PeerNameDisplay>{peer.userId}</PeerNameDisplay>
|
|
</ListItemButton>
|
|
))}
|
|
</List>
|
|
<Divider />
|
|
</MuiDrawer>
|
|
)
|
|
}
|