Create TeksKat

2020-12-17 09:05:40 +01:00
parent e27ba55e3a
commit 8f0ee7879f
1 changed files with 69 additions and 0 deletions
@@ -0,0 +1,69 @@
+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 {titre, awtis, annee, cover, published_at, slug} = teks
+  const datPiblikasyon = format(new Date(published_at), 'Pp', {locale: fr})
+
+  const handleClick = slug => {
+    router.push(`/teks/${slug}#${slug}`)
+  }
+
+  return (
+    <Grid item sm={12} md={6} lg={4}>
+      <Card className={classes.root}>
+        <CardActionArea onClick={() => handleClick(slug)}>
+          <CardMedia
+            className={classes.media}
+            component='img'
+            alt={titre}
+            image={cover ? `${process.env.NEXT_PUBLIC_API_URL}${cover.url}` : noImageUrl}
+            title={titre}
+          />
+          <CardContent>
+            <Typography gutterBottom variant='h5' component='h2'>
+              {titre}
+            </Typography>
+            <Typography variant='body2' color='textSecondary' component='p'>
+              {awtis.map(a => a.alias).join()}
+            </Typography>
+            <Typography variant='body2' color='textSecondary' component='p'>
+              {annee}
+            </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
+}