• Large (Size >= 992px) and Extra Large (Size >= 1200px)

• Download dependencies by running npm install
• Start up the app using npm start

The app must have the following functionalities

• Action Movies List and Comedy Movies List should be displayed using React Slick

• The App is provided with moviesList. It consists of a list of movieItem objects with the following properties in each movieItem object

  Key	Data Type
  id	String
  thumbnailUrl	String
  videoUrl	String
  categoryId	String

• When the next button is clicked in any of the sliders, the next movie items thumbnail in the corresponding moviesList should be displayed

• When the previous button is clicked in any of the sliders, the previous movie items thumbnail in the corresponding moviesList should be displayed
  

  

• When you click on the thumbnail, then the popup should be opened,

  • And corresponding video should be displayed using React player component from react-player
    
  
  - When the close button is clicked, then the popup should be closed

Use these files to complete the implementation:

• src/components/PrimeVideo/index.js
• src/components/PrimeVideo/index.css
• src/components/MoviesSlider/index.js
• src/components/MovieItem/index.js
• src/components/MovieItem/index.css

• To build this project, take a look at the React Slick, React Popup and React Video Player reading materials

• To style popup content use .popup-content class

<Popup
  modal
  trigger={
    //write code here
  }
  className="popup-content"
>
  //write code here
</Popup>

The following instructions are required for the tests to pass

• One frame of the slider should have 4 thumbnails
• The thumbnail images in the app should have alt as thumbnail
• The close button in the popup should have the testid as closeButton
• IoMdClose from react-icons should be used for Close Icon in the Popup

• https://assets.ccbp.in/frontend/react-js/prime-video-img.png alt should be prime video

• Roboto