57 lines
2.1 KiB
JavaScript
57 lines
2.1 KiB
JavaScript
|
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
|
||
|
|
}
|