diff options
| -rw-r--r-- | services/requests.tsx | 3 | ||||
| -rw-r--r-- | src/components/Genre.tsx | 27 | ||||
| -rw-r--r-- | src/components/PreviewCard.tsx | 19 | ||||
| -rw-r--r-- | src/pages/browse/index.tsx | 116 | ||||
| -rw-r--r-- | src/styles/globals.css | 12 |
5 files changed, 108 insertions, 69 deletions
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 |