From 66412b7788f49def33fc2143f9e1bd5d25bac261 Mon Sep 17 00:00:00 2001
From: Alberto-Duarte <alberto@albertoduarte.com>
Date: Tue, 25 Apr 2023 16:27:11 +0100
Subject: added more things jaja

---
 services/requests.tsx          |   3 +-
 src/components/Genre.tsx       |  27 ++++++++++
 src/components/PreviewCard.tsx |  19 +++++++
 src/pages/browse/index.tsx     | 116 +++++++++++++++++++----------------------
 src/styles/globals.css         |  12 ++---
 5 files changed, 108 insertions(+), 69 deletions(-)
 create mode 100644 src/components/Genre.tsx
 create mode 100644 src/components/PreviewCard.tsx

diff --git a/services/requests.tsx b/services/requests.tsx
index da35bbc..f77581d 100644
--- a/services/requests.tsx
+++ b/services/requests.tsx
@@ -1,7 +1,8 @@
 const API_KEY = '8216fbb9997cd81a67471e6cb5a6f2df'
 
 const requests = {
-    fetchTopRated: `/movie/top_rated?api_key=${API_KEY}`
+    fetchTopRated: `/movie/top_rated?api_key=${API_KEY}`,
+    fetchTrending: `/trending/movie/day?api_key=${API_KEY}`,
 }
 
 export default requests
\ No newline at end of file
diff --git a/src/components/Genre.tsx b/src/components/Genre.tsx
new file mode 100644
index 0000000..e63a26a
--- /dev/null
+++ b/src/components/Genre.tsx
@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react"
+
+const Genres = ({id}) => {
+
+    const baseURL = 'https://api.themoviedb.org/3'
+    const API_KEY = '8216fbb9997cd81a67471e6cb5a6f2df'
+    const [genres, setGenres] = useState()
+
+    useEffect(() => {
+        fetch(`${baseURL}/movie/${id}?api_key=${API_KEY}`).then((res) => res.json()).then((data) => {
+            console.log('MOVIE', data.genres)
+            setGenres(data.genres)
+        })
+    }, [])
+
+    return (
+        <div className="text-white/60 gap-x-3 text-xs flex flex-row flex-wrap relative">
+            {genres?.map((genre) => {
+                return (
+                    <div>{genre.name}</div>
+                )
+            })}
+        </div>
+    )
+}
+
+export default Genres
\ No newline at end of file
diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx
new file mode 100644
index 0000000..5c4129f
--- /dev/null
+++ b/src/components/PreviewCard.tsx
@@ -0,0 +1,19 @@
+const imageURL = 'https://image.tmdb.org/t/p/original';
+import Genre from "./Genre";
+const baseURL ='https://api.themoviedb.org/3/'
+
+const PreviewCard = ({ movie }) => {
+    return (
+        <div className="hover:z-10">
+            <div className="rounded ring-white hover:ring-4 flex-col p-1 relative bg-cover h-32 w-60 shrink-0 flex justify-end cursor-pointer hover:scale-125 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}
+             </h3>
+            <Genre id={movie.id}/> 
+                </div>
+        </div>
+          )}
+        
+
+export default PreviewCard
\ No newline at end of file
diff --git a/src/pages/browse/index.tsx b/src/pages/browse/index.tsx
index 1b85fd3..90c13c2 100644
--- a/src/pages/browse/index.tsx
+++ b/src/pages/browse/index.tsx
@@ -1,100 +1,94 @@
 import { link } from 'fs'
 import Link from 'next/link'
-import { BellIcon, MagnifyingGlassIcon, PlayIcon, InformationCircleIcon, ArrowSmallDownIcon} from '@heroicons/react/24/solid'
+import { BellIcon, MagnifyingGlassIcon, PlayIcon, ArrowSmallDownIcon} from '@heroicons/react/24/solid'
+import { InformationCircleIcon} from '@heroicons/react/24/outline'
 import { useEffect, useState } from 'react'
 import requests from '../../../services/requests'
+import Image from "next/image"
+import PreviewCard from '@prueba/components/PreviewCard'
+
 // import NetflixLogo from '../../../public/images/netflix_logo.svg'
 const baseURL ='https://api.themoviedb.org/3/'
 const imageURL = 'https://image.tmdb.org/t/p/original'
 
 export default function Home() {
   const [heroMovie, setHeroMovie] = useState()
+  const [trendingMovies, setTrendingMovies] = useState()
   useEffect(() => {
     fetch(`${baseURL}${requests.fetchTopRated}`).then(res => res.json()).then((data) => {
-      console.log('MOVIES', data.results[0])
-      setHeroMovie(data.results[0])
+      console.log(data.results)
+      setHeroMovie(data.results[3])
     })
   }, [])
+  useEffect(() => {
+    fetch(`${baseURL}${requests.fetchTrending}`).then(res => res.json()).then((data) => {
+      setTrendingMovies(data.results)
+    })
+  }, [])
+
   return (
-    <div className="bg-transparent w-screen h-screen flex flex-col text-white">
-      <header className='flex justify-between pt-6 px-8'>
+    <div className="flex flex-col text-white justify-between gap-10 h-screen">
+      <header className='flex justify-between pt-3 px-8 z-10 text-xs'>
         <div className='flex items-center gap-4'>
-          <img className='scale-75 mr-4' src="../images/netflix_logo.svg" alt="SVG image"/> 
-          <a className='text-white text-sm font-bold'>Home</a>
-          <a className='text-white text-sm'>TV Shows</a>
-          <a className='text-white text-sm'>Movies</a>
-          <a className='text-white text-sm'>News & Popular</a>
-          <a className='text-white text-sm'>My List</a>
-          <a className='text-white text-sm'>Browse by Language</a>
+          <img className='scale-[65%] mr-4' src="../images/netflix_logo.svg" alt="SVG image"/> 
+          <a className='text-white font-bold'>Home</a>
+          <a className='text-white'>TV Shows</a>
+          <a className='text-white'>Movies</a>
+          <a className='text-white'>News & Popular</a>
+          <a className='text-white'>My List</a>
+          <a className='text-white'>Browse by Language</a>
         </div>
         <div className='flex items-center gap-4'>
-          <MagnifyingGlassIcon className='h-6 w-6'/>
-          <a className='text-white text-sm'>Kids</a>
-          <BellIcon className='h-6 w-6'/>
-          <div></div>
-          <ArrowSmallDownIcon className='h-6 w-6'/>
+          <MagnifyingGlassIcon className='h-4 w-4'/>
+          <a className='text-white'>Kids</a>
+          <BellIcon className='h-4 w-4'/>
+          <div className='h-8 w-8'>
+              <Link href='../' className="w-[128px] h-[128px] rounded-xl overflow-hidden bg-white">
+                <img src='https://avatars.dicebear.com/api/male/124.svg' alt=""/>
+              </Link>
+          </div>
+          <ArrowSmallDownIcon className='h-4 w-4'/>
         </div>
       </header>
-      <main className='w-screen'>
-        <section className='w-1/3 ml-10 mt-20'>
+        <section className='w-1/3 ml-10'>
           <div className='flex items-center'>
-            <img className='scale-75 mr-5' src="../images/N.svg" alt="SVG image"/> 
-            <h1 className='font-mono tracking-[.4rem]'>MOVIES</h1>
+            <img className='scale-[65%] mr-5' src="../images/N.svg" alt="SVG image"/> 
+            <h1 className='text-sm font-mono tracking-[.4rem]'>MOVIES</h1>
           </div>
-          <div className='h-fit text-[4rem]'>
+          <div className='h-fit text-[3rem]'>
               {heroMovie?.original_title}
           </div>
           <div className='flex items-center'>
-            <img className='scale-50' src="../images/Top10.svg" alt="SVG image"/> 
-            <h2 className='text-xl font-bold'>#1 in TV Shows Today</h2>
+            <img className='scale-[45%]' src="../images/Top10.svg" alt="SVG image"/> 
+            <h2 className='font-bold'>#1 in TV Shows Today</h2>
           </div>
           <div>
-            <p className='break-words text-justify'>
+            <p className=' text-sm break-words text-justify'>
               {heroMovie?.overview}
             </p>
           </div>
-          <div className='flex gap-4 mt-5'>
-            <button className='flex items-center w-28 h-10 bg-white text-black text-2xl justify-center font-semibold ring-black ring-offset-10 hover:ring-4 rounded'><PlayIcon className='h-8 w-8 mr-2'/>Play</button>
-            <button className='flex items-center w-36 h-10 bg-gray-700/80 justify-center ring-white hover:ring-4 rounded'><InformationCircleIcon className='h-8 w-8 mr-2'/>More Info</button>
+          <div className='flex gap-4 mt-4'>
+            <button className='flex items-center p-4 h-10 bg-white text-black text-xl justify-center font-semibold ring-black ring-offset-10 hover:ring-4 rounded'>
+              <PlayIcon className='h-6 w-6 mr-2'/>Play
+            </button>
+            <button className='flex items-center p-4 h-10 bg-gray-700/80 justify-center ring-white hover:ring-4 rounded'>
+              <InformationCircleIcon className='h-6 w-6 mr-2'/>More Info
+            </button>
           </div>
         </section>
-        <section className=' ml-10 mt-10'>
+        <section className=' ml-10 mb-10 z-10'>
           <h2>Popular on Netflix</h2>
-          <div className='flex gap-6'>
+          <div className='flex flex-row gap-3 overflow-x-auto mt-4 items-center p-5 pl-10 -ml-10'>
             {
-              MOVIES.map((movie, index) => (
-                <div key={index}>
-                <img src={movie.link} className='h-20 w-20 bg-green'>
-                  </img>
-                </div>
-            ))}
+              trendingMovies?.map((movie, index) => (
+                <PreviewCard key={index} movie={movie}/>
+            ))} 
           </div>
         </section>
-      </main>
-      <div className='absolute h-full w-full bg-cover bg-center -z-10' style={{backgroundImage: `url(${imageURL}${heroMovie?.backdrop_path})`}}></div>
+      <div className='absolute h-full w-full bg-contain bg-center -z-20 bg-right' style={{backgroundImage: `url(${imageURL}${heroMovie?.backdrop_path})`}}></div>
+      <div className='absolute w-full h-32 -z-10 bg-gradient-to-b from-black'></div>
+      <div className='absolute bottom-0 w-full h-20 -z-10 bg-gradient-to-t from-black'></div>
+      <div className='absolute w-2/3 h-full -z-10 bg-gradient-to-r from-black'></div>
     </div>
   )
 }
-
-
-
-const MOVIES = [
-  {
-    link:'../images/Card.png',
-  },
-  {
-    link:'../images/Card.png',
-  },
-  {
-    link:'../images/Card.png',
-  },
-  {
-    link:'../images/Card.png',
-  },
-  {
-    link:'../images/Card.png',
-  },
-  {
-    link:'../images/Card.png',
-  }
-]
\ No newline at end of file
diff --git a/src/styles/globals.css b/src/styles/globals.css
index fd81e88..9fbd6c7 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -17,11 +17,9 @@
 }
 
 body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background-color: black;
 }
+
+  ::-webkit-scrollbar {
+  width: 0px;
+}
\ No newline at end of file
-- 
cgit v1.2.3-54-g00ecf