From eb5987108e36136bc079873499f95567b9051029 Mon Sep 17 00:00:00 2001
From: Alberto Mac <alberto.duarte.delgado@pwc.com>
Date: Mon, 26 Aug 2024 18:52:46 +0100
Subject: revision, and minor fixes

---
 app/components/Modal.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

(limited to 'app/components/Modal.tsx')

diff --git a/app/components/Modal.tsx b/app/components/Modal.tsx
index e783cfa..dd2e850 100644
--- a/app/components/Modal.tsx
+++ b/app/components/Modal.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { XMarkIcon } from '@heroicons/react/24/outline'
 import Genre from './Genre'
 
-const baseURL = 'https://api.themoviedb.org/3/'
+const baseURL = 'https://api.themoviedb.org/3'
 const API_KEY = '8216fbb9997cd81a67471e6cb5a6f2df'
 const Modal = ({ modalVisible, modalContent, setModalVisible, type }) => {
     const [content, setContent] = useState()
@@ -14,7 +14,10 @@ const Modal = ({ modalVisible, modalContent, setModalVisible, type }) => {
     })
   }, [modalContent])
   useEffect(() => {
-  if (modalContent) {
+    if (modalContent) {
+      console.log(baseURL);
+      console.log(modalContent.media_type);
+      console.log(modalContent.id);
    fetch(`${baseURL}/${modalContent.media_type}/${modalContent.id}/videos?api_key=${API_KEY}`)
         .then((res) => res.json())
         .then((data) => {
@@ -42,8 +45,11 @@ const Modal = ({ modalVisible, modalContent, setModalVisible, type }) => {
                     <Genre id={modalContent?.id} />
                         <h3 className={'text-xl'}>{modalContent?.original_name}{modalContent?.original_title}</h3>
                         <p className='w-full break-words h-[70px] overflow-y-auto'>{modalContent?.overview}</p>
-                        <hr className='my-4'/>
-                        <div className='flex flex-row overflow-x-auto gap-8'>
+        <hr className='my-4'/>
+	<div className='relative'>
+	<div className="absolute left-0 top-0 bottom-0 w-16 z-50 pointer-events-none bg-gradient-to-r from-gray-800"></div>
+	<div className="absolute right-0 top-0 bottom-0 w-16 z-50 pointer-events-none bg-gradient-to-l from-gray-800"></div>
+        <div className='flex flex-row overflow-x-auto gap-8 relative'>
                             {
                             similarMovies?.map((movie, index) => (
 
@@ -59,6 +65,7 @@ const Modal = ({ modalVisible, modalContent, setModalVisible, type }) => {
                             ))} 
                         </div>
                     </div>
+                    </div>
             </div>
         </div>
     )
-- 
cgit v1.2.3-54-g00ecf