Cédric FAMIBELLE-PRONZOLA
77 lines
2.2 KiB
JavaScript
77 lines
2.2 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import {useRouter} from 'next/router'
|
|
import {format} from 'date-fns'
|
|
import {fr} from 'date-fns/locale'
|
|
import {
|
|
Card,
|
|
CardActionArea,
|
|
CardContent,
|
|
CardMedia,
|
|
Typography,
|
|
Grid
|
|
} from '@material-ui/core'
|
|
import {makeStyles} from '@material-ui/core/styles'
|
|
|
|
const useStyles = makeStyles({
|
|
root: {
|
|
maxWidth: 345
|
|
},
|
|
media: {
|
|
height: 240,
|
|
objectFit: 'contain'
|
|
}
|
|
})
|
|
|
|
export default function TeksKat({teks}) {
|
|
const classes = useStyles()
|
|
const router = useRouter()
|
|
const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj'
|
|
const {tit, awtis, lanne, kouveti, published_at, slug} = teks
|
|
const datPiblikasyon = format(new Date(published_at), 'P', {locale: fr})
|
|
|
|
const handleClick = slug => {
|
|
router.push(`/teks/${slug}#${slug}`).then(() => window.scrollTo(0, 0))
|
|
}
|
|
|
|
return (
|
|
<Grid item sm={12} md={6} lg={4}>
|
|
<Card className={classes.root}>
|
|
<CardActionArea onClick={() => handleClick(slug)}>
|
|
<CardMedia
|
|
className={classes.media}
|
|
component='img'
|
|
alt={tit}
|
|
image={kouveti ? `${process.env.NEXT_PUBLIC_API_URL}${kouveti.url}` : noImageUrl}
|
|
title={tit}
|
|
/>
|
|
<CardContent>
|
|
<Typography display='inline' style={{marginRight: 5}} variant='h6' component='h2'>
|
|
{tit}
|
|
</Typography>
|
|
<Typography variant='caption'>
|
|
{teks.user && (
|
|
<>
|
|
(<i>retranscrit par {teks.user.username}</i>)
|
|
</>
|
|
)}
|
|
</Typography>
|
|
<Typography variant='body2' color='textSecondary' component='p'>
|
|
{awtis.map(a => a.alias).join(', ')}
|
|
</Typography>
|
|
<Typography variant='body2' color='textSecondary' component='p'>
|
|
{lanne}
|
|
</Typography>
|
|
<Typography align='center' style={{marginTop: '0.5em'}} variant='body1' color='textSecondary' component='p'>
|
|
Piblikasyon : {datPiblikasyon}
|
|
</Typography>
|
|
</CardContent>
|
|
</CardActionArea>
|
|
</Card>
|
|
</Grid>
|
|
)
|
|
}
|
|
|
|
TeksKat.propTypes = {
|
|
teks: PropTypes.object.isRequired
|
|
}
|