diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Genre.tsx | 27 | ||||
| -rw-r--r-- | src/components/PreviewCard.tsx | 19 | ||||
| -rw-r--r-- | src/pages/_app.tsx | 2 | ||||
| -rw-r--r-- | src/pages/browse/index.tsx | 94 | ||||
| -rw-r--r-- | src/pages/index.tsx | 41 | ||||
| -rw-r--r-- | src/styles/globals.css | 1 |
6 files changed, 2 insertions, 182 deletions
diff --git a/src/components/Genre.tsx b/src/components/Genre.tsx deleted file mode 100644 index e63a26a..0000000 --- a/src/components/Genre.tsx +++ /dev/null @@ -1,27 +0,0 @@ -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 deleted file mode 100644 index 5c4129f..0000000 --- a/src/components/PreviewCard.tsx +++ /dev/null @@ -1,19 +0,0 @@ -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/_app.tsx b/src/pages/_app.tsx index e57ed44..c055f25 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,4 +1,4 @@ -import '@prueba/styles/globals.css' +import '../styles/globals.css' import type { AppProps } from 'next/app' export default function App({ Component, pageProps }: AppProps) { diff --git a/src/pages/browse/index.tsx b/src/pages/browse/index.tsx deleted file mode 100644 index 90c13c2..0000000 --- a/src/pages/browse/index.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import { link } from 'fs' -import Link from 'next/link' -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(data.results) - setHeroMovie(data.results[3]) - }) - }, []) - useEffect(() => { - fetch(`${baseURL}${requests.fetchTrending}`).then(res => res.json()).then((data) => { - setTrendingMovies(data.results) - }) - }, []) - - return ( - <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-[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-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> - <section className='w-1/3 ml-10'> - <div className='flex items-center'> - <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-[3rem]'> - {heroMovie?.original_title} - </div> - <div className='flex items-center'> - <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=' text-sm break-words text-justify'> - {heroMovie?.overview} - </p> - </div> - <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 mb-10 z-10'> - <h2>Popular on Netflix</h2> - <div className='flex flex-row gap-3 overflow-x-auto mt-4 items-center p-5 pl-10 -ml-10'> - { - trendingMovies?.map((movie, index) => ( - <PreviewCard key={index} movie={movie}/> - ))} - </div> - </section> - <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> - ) -} diff --git a/src/pages/index.tsx b/src/pages/index.tsx deleted file mode 100644 index 0a21d32..0000000 --- a/src/pages/index.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import Link from "next/link" -import Image from "next/image" - -export default function Home() { - return ( - <div className="bg-black w-screen h-screen flex flex-col items-center justify-center"> - <h1>Netflix</h1> - <p className="text-white text-[3.5vw]">Who's watching?</p> - <div className="flex flex-row gap-3 mt-6"> - { - USERS.map((user, index) => ( - <div key={index} className="flex flex-col items-center justify-center"> - <Link href={user.link} className="w-[128px] h-[128px] rounded-xl overflow-hidden bg-white"> - <Image src={user.avatar} width={128} height={128} alt=""/> - </Link> - <p className="text-gray-400 text-xs">{user.name}</p> - </div> - ))} - </div> - </div> - ) -} - -const USERS = [ - { - name:'Alberto', - link:'/browse', - avatar:'https://avatars.dicebear.com/api/male/124.svg' - }, - { - name:'Kids', - link:'/', - avatar:'https://avatars.dicebear.com/api/male/122.svg' - }, - { - name:'Add profile', - link:'/', - avatar:'https://avatars.dicebear.com/api/female/12.svg' - // icon:'...' - } -]
\ No newline at end of file diff --git a/src/styles/globals.css b/src/styles/globals.css index 9fbd6c7..ccea7d8 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -22,4 +22,5 @@ body { ::-webkit-scrollbar { width: 0px; + display: none; }
\ No newline at end of file |