doc: create Movie function

2022-09-03 12:43:05 -07:00
parent e68e1e74ce
commit e4f89b7895
1 changed files with 30 additions and 0 deletions
@@ -0,0 +1,30 @@
+import { Typography, Grid, Grow, Tooltip, Rating } from '@mui/material';
+import { Link } from 'react-router-dom';
+
+import useStyles from './styles';
+
+function Movie({ movie, i }) {
+    const classes = useStyles();
+
+    return (
+        <Grid item xs={12} sm={6} md={4} lg={3} xl={2} className={classes.movie}>
+            <Grow in key={i} timeout={(i + 1) * 250}>
+                <Link className={classes.links} to={`/movie/${movie.id}`}>
+                    <img
+                        src={movie.poster_path ? `https://image.tmdb.org/t/p/w500/${movie.poster_path}` : 'https://www.fillmurray.com/200/300'}
+                        alt={movie.title}
+                        className={classes.image}
+                    />
+                    <Typography className={classes.title} variant="h5">{movie.title}</Typography>
+                    <Tooltip disableTouchListener title={`${movie.vote_average} / 10`}>
+                        <div>
+                            <Rating readOnly value={movie.vote_average / 2} precision={0.1} />
+                        </div>
+                    </Tooltip>
+                </Link>
+            </Grow>
+        </Grid>
+    );
+}
+
+export default Movie;