Create KomanteList component

2021-06-26 12:25:50 +02:00
parent 9a3e18dcbb
commit 1119d9a902
1 changed files with 57 additions and 0 deletions
@@ -0,0 +1,57 @@
+import PropTypes from 'prop-types'
+import {format} from 'date-fns'
+import {fr} from 'date-fns/locale'
+import {makeStyles} from '@material-ui/core/styles'
+
+import {
+  Typography,
+  Divider,
+  List,
+  ListItemText
+} from '@material-ui/core'
+
+import {formatJsonString} from '../../lib/utils/format'
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    width: '100%',
+    maxWidth: '36ch',
+    backgroundColor: theme.palette.background.paper
+  },
+  inline: {
+    display: 'inline'
+  }
+}))
+
+export default function KomanteList({komante}) {
+  const classes = useStyles()
+
+  return (
+    <List 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>
+      ))}
+    </List>
+  )
+}
+
+KomanteList.propTypes = {
+  komante: PropTypes.array.isRequired
+}