diff options
Diffstat (limited to 'app/components/Modal.tsx')
| -rw-r--r-- | app/components/Modal.tsx | 15 |
1 files changed, 11 insertions, 4 deletions
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>
)
|