50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
import { Avatar, Box, List, ListItem, Typography } from '@mui/joy'
|
|
import ModalActions from '../../../components/common/ModalActions'
|
|
import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
|
|
|
|
const UserModal = ({ isOpen, performers = [], onSelect, onClose }) => {
|
|
const { ResponsiveModal } = useResponsiveModal()
|
|
|
|
return (
|
|
<ResponsiveModal
|
|
open={isOpen}
|
|
onClose={onClose}
|
|
size='lg'
|
|
fullWidth={true}
|
|
title='Select User'
|
|
footer={
|
|
<ModalActions secondary={{ label: 'Cancel', onClick: onClose }} />
|
|
}
|
|
>
|
|
<List sx={{ mb: 2 }}>
|
|
{performers.map(user => (
|
|
<ListItem
|
|
key={user.userId}
|
|
sx={{
|
|
cursor: 'pointer',
|
|
'&:hover': {
|
|
backgroundColor: 'rgba(0, 0, 0, 0.04)',
|
|
},
|
|
}}
|
|
onClick={() => {
|
|
onSelect(user)
|
|
onClose()
|
|
}}
|
|
>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
|
<Avatar
|
|
size='lg'
|
|
src={user.image || user.avatar}
|
|
alt={user.displayName || user.name}
|
|
/>
|
|
<Typography>{user.displayName || user.name}</Typography>
|
|
</Box>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</ResponsiveModal>
|
|
)
|
|
}
|
|
|
|
export default UserModal
|