MoviesRecommended.js

import React, {useEffect,useState} from 'react';
import NavBar from './NavBar.js';
import { List, Header, Rating  } from "semantic-ui-react";
import { fade, makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
    title: {
        color: 'red',
        fontSize: '12pt',
        position: 'relative',
        top: '0px',
        textAlign: 'center',
        letterSpacing: '3px',
    },
    container: {
        width: 'auto',
        height: '300px',
        display: 'flex',
        flexWrap: 'wrap',
        marginLeft: '2.5px',
        rowGap: '5px',
    },
    cover: {
        width:'200px',
        height:'280px',
        position: 'relative',
    },
    movieCard: {
        marginBottom: '40px',
        marginRight: '2.5px',
        marginLeft: '2.5px',
        width: '200px',
        height: '280px',
        position: 'relative',
        '&:hover>div': {
            opacity:1,
            transition:'opacity .25s ease-in-out',
        },
        '&:hover>img': {
            opacity:0.1,
            transition:'opacity .25s ease-in-out',
        }, 
    },
    movieCardHover: {
        textAlign: 'justify',
        position: 'absolute',
        top: '3px',
        color: 'white',
        margin: '0px 10px',
        fontSize: '10pt',
        opacity: '0',
        cursor:'pointer'
    }
}));

export const MoviesRecommended = ({ movies }) => {
    const classes = useStyles();
	return (
		<div className={classes.container}>
			{movies.map(movie => {
				return (
					<div className={classes.movieCard} onClick={() => {window.location.href='/movies/'+movie.id}}>
                        <img className={classes.cover} src={movie.coverPhoto} alt=" " />
                        <div className={classes.movieCardHover}>
                            <Rating rating={movie.rating} maxRating={5} disabled icon='ui massive star rating' />
                            <p style={{ textAlign: 'center' }}>Length: {movie.movieLength}</p>
                            <p style={{ textAlign: 'center' }}>Release: {movie.release}</p>
                            <p style={{ textAlign: 'center' }}>Category: {movie.category}</p>
                            <p>{movie.description}</p>
                        </div>
					</div>
                    
					)
				})}
		</div>

	)
}