From 1119d9a90231db2145165e5e14d9e139c9926eb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@live.fr>
Date: Sat, 26 Jun 2021 12:25:50 +0200
Subject: [PATCH] Create KomanteList component

---
 components/komante/komante-list.js | 57 ++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 components/komante/komante-list.js

diff --git a/components/komante/komante-list.js b/components/komante/komante-list.js
new file mode 100644
index 0000000..1247eac
--- /dev/null
+++ b/components/komante/komante-list.js
@@ -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
+}