From 72cf36e033ba794db7982befa45f035b62fa6cd2 Mon Sep 17 00:00:00 2001
From: "Alberto Duarte (PWC)" <alberto.duarte.delgado@pwc.com>
Date: Mon, 9 Oct 2023 17:32:25 +0100
Subject: Changes

---
 src/components/Genre.tsx       | 27 ------------
 src/components/PreviewCard.tsx | 19 ---------
 src/pages/_app.tsx             |  2 +-
 src/pages/browse/index.tsx     | 94 ------------------------------------------
 src/pages/index.tsx            | 41 ------------------
 src/styles/globals.css         |  1 +
 6 files changed, 2 insertions(+), 182 deletions(-)
 delete mode 100644 src/components/Genre.tsx
 delete mode 100644 src/components/PreviewCard.tsx
 delete mode 100644 src/pages/browse/index.tsx
 delete mode 100644 src/pages/index.tsx

(limited to 'src')

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
-- 
cgit v1.2.3-54-g00ecf