1 files changed, 66 insertions, 0 deletions
diff --git a/app/components/Modal.tsx b/app/components/Modal.tsx
new file mode 100644
index 0000000..e783cfa
--- /dev/null
+++ b/app/components/Modal.tsx
@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react'
+import { XMarkIcon } from '@heroicons/react/24/outline'
+import Genre from './Genre'
+
+const baseURL = 'https://api.themoviedb.org/3/'
+const API_KEY = '8216fbb9997cd81a67471e6cb5a6f2df'
+const Modal = ({ modalVisible, modalContent, setModalVisible, type }) => {
+    const [content, setContent] = useState()
+    const [video, setVideo] = useState()
+  const [similarMovies, setSimilarMovies] = useState()
+  useEffect(() => {
+    fetch(`${baseURL}/movie/${modalContent?.id}/similar?api_key=${API_KEY}`).then(res => res.json()).then((data) => {
+    setSimilarMovies(data.results)
+    })
+  }, [modalContent])
+  useEffect(() => {
+  if (modalContent) {
+   fetch(`${baseURL}/${modalContent.media_type}/${modalContent.id}/videos?api_key=${API_KEY}`)
+        .then((res) => res.json())
+        .then((data) => {
+          console.log('VIDEOS DATA', data.results[0].key)
+          setVideo(data.results[0].key)
+        })
+}
+  }, [modalContent])
+    return (
+        <div
+            className={`backdrop-blur-[2px] fixed inset-0 z-50 bg-black/40 flex items-center justify-center ${modalVisible ? '' : 'hidden'
+                }`}  onClick={(e) => e.target === e.currentTarget && setModalVisible(false)}
+        >
+            <div className="flex flex-col bg-transparent shadow-2xl rounded-xl z-100">
+                                    {modalVisible && (
+              <iframe
+                className={'w-full bg-black'}
+                width="420"
+                height="315"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                src={`https://www.youtube.com/embed/${video}?autoplay=1`}
+              ></iframe>
+            )}
+                    <div className={'px-8 py-4 w-[600px] bg-gray-800'}>
+                    <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'>
+                            {
+                            similarMovies?.map((movie, index) => (
+
+
+                    <div
+                        className={`
+                            shrink-0 bg-contain bg-no-repeat w-[150px] h-[112px] bg-center z-40 ${movie?.backdrop_path === null ? 'hidden' : '' }
+                        `}
+                        style={{
+                            backgroundImage: `url(https://image.tmdb.org/t/p/original${movie?.backdrop_path})`,
+                        }}
+                    ></div>
+                            ))} 
+                        </div>
+                    </div>
+            </div>
+        </div>
+    )
+}
+export default Modal