Split MizikList and add GroupedVirtuoso

2023-07-22 13:45:08 +04:00
parent 164e0d621b
commit ffe3421fa9
3 changed files with 161 additions and 101 deletions
@@ -0,0 +1,56 @@
+import PropTypes from 'prop-types'
+import Link from 'next/link'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemText from '@mui/material/ListItemText'
+import Typography from '@mui/material/Typography'
+import ListItemAvatar from '@mui/material/ListItemAvatar'
+import Avatar from '@mui/material/Avatar'
+import FiberNewOutlinedIcon from '@mui/icons-material/FiberNewOutlined'
+import LibraryMusicIcon from '@mui/icons-material/LibraryMusic'
+import ExplicitIcon from '@mui/icons-material/Explicit'
+
+import {esBrandNew} from '../../lib/date'
+import {getAlias} from '../../lib/utils/format'
+
+const apiUrl = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
+
+export default function MizikLyen({niAwtis, anPawol, kuveti, slug}) {
+  return (
+    <Link
+      passHref
+      href={`/paroles/${anPawol.attributes.slug}#${anPawol.attributes.slug}`}
+      style={{textDecoration: 'none', width: '100%', display: 'flex', alignItems: 'center'}}
+    >
+      <ListItemButton
+        sx={{padding: 0}}
+        id={anPawol.attributes.slug}
+        selected={slug === anPawol.attributes.slug}
+      >
+        <ListItemAvatar sx={{ml: 2.5}}>
+          <Avatar alt={anPawol.attributes.titre} src={`${apiUrl}${kuveti?.url}`} />
+        </ListItemAvatar>
+        <ListItemText
+          primary={<Typography sx={{fontWeight: 'bold'}} color='info.main'>{anPawol.attributes.titre}</Typography>}
+          secondary={niAwtis ? getAlias(anPawol.attributes.artistes, anPawol.attributes.prioriteArtistes) : null} />
+
+        {esBrandNew(anPawol.attributes.publishedAt) && (
+          <FiberNewOutlinedIcon style={{fontSize: 30, marginRight: 5}} color='primary' />
+        )}
+
+        {anPawol.attributes.explicitLyrics && (
+          <ExplicitIcon style={{marginRight: 5}} color='secondary' />
+        )}
+        {anPawol.attributes.okiMizikID && (
+          <LibraryMusicIcon style={{fontSize: 30, marginRight: 5}} color='primary' />
+        )}
+      </ListItemButton>
+    </Link>
+  )
+}
+
+MizikLyen.propTypes = {
+  niAwtis: PropTypes.bool,
+  anPawol: PropTypes.object,
+  kuveti: PropTypes.object,
+  slug: PropTypes.string
+}