Create MizikLis component

components/awtis/mizik-lis.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import {makeStyles} from '@material-ui/core/styles'
+import List from '@material-ui/core/List'
+import ListItem from '@material-ui/core/ListItem'
+import ListItemText from '@material-ui/core/ListItemText'
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    width: '100%',
+    maxWidth: 360,
+    backgroundColor: theme.palette.background.paper
+  }
+}))
+
+export default function MizikLis({miziks}) {
+  const classes = useStyles()
+
+  return (
+    <List component='nav' className={classes.root} aria-label='mizik'>
+      {miziks.map(m => (
+        <ListItem key={m._id} button>
+          <ListItemText primary={m.titre} />
+        </ListItem>
+      ))}
+    </List>
+  )
+}
+
+MizikLis.propTypes = {
+  miziks: PropTypes.array.isRequired
+}