Cédric FAMIBELLE-PRONZOLA
68 lines
1.5 KiB
JavaScript
68 lines
1.5 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import {format} from 'date-fns'
|
|
import {fr} from 'date-fns/locale'
|
|
import {styled} from '@mui/material/styles'
|
|
|
|
import {
|
|
Typography,
|
|
Divider,
|
|
List,
|
|
ListItemText
|
|
} from '@mui/material'
|
|
|
|
import {formatJsonString} from '../../lib/utils/format'
|
|
|
|
const PREFIX = 'komante-list'
|
|
|
|
const classes = {
|
|
root: `${PREFIX}-root`,
|
|
inline: `${PREFIX}-inline`
|
|
}
|
|
|
|
const StyledList = styled(List)((
|
|
{
|
|
theme
|
|
}
|
|
) => ({
|
|
[`&.${classes.root}`]: {
|
|
width: '100%',
|
|
maxWidth: '36ch',
|
|
backgroundColor: theme.palette.background.paper
|
|
},
|
|
|
|
[`& .${classes.inline}`]: {
|
|
display: 'inline'
|
|
}
|
|
}))
|
|
|
|
export default function KomanteList({komante}) {
|
|
return (
|
|
<StyledList className={classes.root}>
|
|
{komante.map(({id, username, kontni, sentAt}) => (
|
|
<div key={id}>
|
|
<ListItemText
|
|
primary={
|
|
<Typography gutterBottom style={{fontWeight: 'bold'}} variant='body1'>
|
|
{username}
|
|
</Typography>
|
|
}
|
|
/>
|
|
<ListItemText
|
|
primary={formatJsonString(kontni)}
|
|
secondary={
|
|
<Typography gutterBottom style={{marginBlock: 5, fontStyle: 'italic'}} variant='caption' display='block'>
|
|
{format(new Date(sentAt), 'Pp', {locale: fr})}
|
|
</Typography>
|
|
}
|
|
/>
|
|
<Divider style={{marginBottom: '1em'}} />
|
|
</div>
|
|
))}
|
|
</StyledList>
|
|
)
|
|
}
|
|
|
|
KomanteList.propTypes = {
|
|
komante: PropTypes.array.isRequired
|
|
}
|