4 files changed, 135 insertions, 0 deletions
diff --git a/app/components/AuthContext.tsx b/app/components/AuthContext.tsx
new file mode 100644
index 0000000..9c83744
--- /dev/null
+++ b/app/components/AuthContext.tsx
@@ -0,0 +1,25 @@
+'use client'
+import { createContext, useState, useEffect } from 'react';
+import { onAuthStateChanged } from 'firebase/auth';
+import { auth } from '../../services/firebase';
+
+export const AuthContext = createContext();
+
+export const AuthProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (user) => {
+      setUser(user);
+    });
+
+    // Cleanup the subscription when the component unmounts
+    return () => unsubscribe();
+  }, []);
+
+  return (
+    <AuthContext.Provider value={user}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+\ No newline at end of file
diff --git a/app/components/Genre.tsx b/app/components/Genre.tsx
new file mode 100644
index 0000000..13e7ed2
--- /dev/null
+++ b/app/components/Genre.tsx
@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react"
+
+const Genres = ({id}) => {
+
+    const [genres, setGenres] = useState()
+
+    useEffect(() => {
+        fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=8216fbb9997cd81a67471e6cb5a6f2df`).then((res) => res.json()).then((data) => {
+            setGenres(data?.genres)
+        })
+    }, [id])
+
+    return (
+        <div className="text-white/60 gap-x-3 text-xs flex flex-row flex-wrap relative">
+            {genres?.map((genre, index) => {
+                return (
+                    <div key={index}>{genre.name}</div>
+                )
+            })}
+        </div>
+    )
+}
+
+export default Genres
+\ No newline at end of file
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
diff --git a/app/components/PreviewCard.tsx b/app/components/PreviewCard.tsx
new file mode 100644
index 0000000..132f50a
--- /dev/null
+++ b/app/components/PreviewCard.tsx
@@ -0,0 +1,20 @@
+const imageURL = 'https://image.tmdb.org/t/p/original';
+import Genre from "./Genre";
+const baseURL ='https://api.themoviedb.org/3/'
+
+const PreviewCard = ({ movie, setModalContentId, setModalVisible }) => {
+    return (
+        <div className="hover:z-10" onClick={ () => {setModalVisible(true), setModalContentId(movie)}}>
+            <div className="shadow-black hover:outline outline-offset-4 outline-4 outline-white rounded flex-col p-1 relative bg-cover h-32 w-60 shrink-0 flex justify-end cursor-pointer hover:scale-110 transition ease-in-out" style={{backgroundImage: `url(${imageURL}${movie?.backdrop_path})`}}>
+             <div className="absolute h-full w-full inset-0 bg-gradient-to-t from-black/70"></div>
+             <h3 className={"text-white text-sm relative"}>
+               {movie.original_title}
+               {movie.original_name}
+             </h3>
+            <Genre id={movie.id}/> 
+                </div>
+        </div>
+          )}
+        
+
+export default PreviewCard
+\ No newline at end of file