From 1b3a300173c4531bebf3b88966a1fec64d276440 Mon Sep 17 00:00:00 2001 From: Alberto-Duarte Date: Fri, 21 Apr 2023 13:51:46 +0100 Subject: First commit --- src/pages/_app.tsx | 6 +++ src/pages/_document.tsx | 13 ++++++ src/pages/api/hello.ts | 13 ++++++ src/pages/browse/index.tsx | 100 +++++++++++++++++++++++++++++++++++++++++++++ src/pages/index.tsx | 41 +++++++++++++++++++ src/styles/globals.css | 27 ++++++++++++ 6 files changed, 200 insertions(+) create mode 100644 src/pages/_app.tsx create mode 100644 src/pages/_document.tsx create mode 100644 src/pages/api/hello.ts create mode 100644 src/pages/browse/index.tsx create mode 100644 src/pages/index.tsx create mode 100644 src/styles/globals.css (limited to 'src') diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx new file mode 100644 index 0000000..e57ed44 --- /dev/null +++ b/src/pages/_app.tsx @@ -0,0 +1,6 @@ +import '@prueba/styles/globals.css' +import type { AppProps } from 'next/app' + +export default function App({ Component, pageProps }: AppProps) { + return +} diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx new file mode 100644 index 0000000..54e8bf3 --- /dev/null +++ b/src/pages/_document.tsx @@ -0,0 +1,13 @@ +import { Html, Head, Main, NextScript } from 'next/document' + +export default function Document() { + return ( + + + +
+ + + + ) +} diff --git a/src/pages/api/hello.ts b/src/pages/api/hello.ts new file mode 100644 index 0000000..f8bcc7e --- /dev/null +++ b/src/pages/api/hello.ts @@ -0,0 +1,13 @@ +// Next.js API route support: https://nextjs.org/docs/api-routes/introduction +import type { NextApiRequest, NextApiResponse } from 'next' + +type Data = { + name: string +} + +export default function handler( + req: NextApiRequest, + res: NextApiResponse +) { + res.status(200).json({ name: 'John Doe' }) +} diff --git a/src/pages/browse/index.tsx b/src/pages/browse/index.tsx new file mode 100644 index 0000000..1b85fd3 --- /dev/null +++ b/src/pages/browse/index.tsx @@ -0,0 +1,100 @@ +import { link } from 'fs' +import Link from 'next/link' +import { BellIcon, MagnifyingGlassIcon, PlayIcon, InformationCircleIcon, ArrowSmallDownIcon} from '@heroicons/react/24/solid' +import { useEffect, useState } from 'react' +import requests from '../../../services/requests' +// 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() + useEffect(() => { + fetch(`${baseURL}${requests.fetchTopRated}`).then(res => res.json()).then((data) => { + console.log('MOVIES', data.results[0]) + setHeroMovie(data.results[0]) + }) + }, []) + return ( +
+
+ +
+ + Kids + +
+ +
+
+
+
+
+ SVG image +

MOVIES

+
+
+ {heroMovie?.original_title} +
+
+ SVG image +

#1 in TV Shows Today

+
+
+

+ {heroMovie?.overview} +

+
+
+ + +
+
+
+

Popular on Netflix

+
+ { + MOVIES.map((movie, index) => ( +
+ + +
+ ))} +
+
+
+
+
+ ) +} + + + +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/pages/index.tsx b/src/pages/index.tsx new file mode 100644 index 0000000..0a21d32 --- /dev/null +++ b/src/pages/index.tsx @@ -0,0 +1,41 @@ +import Link from "next/link" +import Image from "next/image" + +export default function Home() { + return ( +
+

Netflix

+

Who's watching?

+
+ { + USERS.map((user, index) => ( +
+ + + +

{user.name}

+
+ ))} +
+
+ ) +} + +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 new file mode 100644 index 0000000..fd81e88 --- /dev/null +++ b/src/styles/globals.css @@ -0,0 +1,27 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --foreground-rgb: 0, 0, 0; + --background-start-rgb: 214, 219, 220; + --background-end-rgb: 255, 255, 255; +} + +@media (prefers-color-scheme: dark) { + :root { + --foreground-rgb: 255, 255, 255; + --background-start-rgb: 0, 0, 0; + --background-end-rgb: 0, 0, 0; + } +} + +body { + color: rgb(var(--foreground-rgb)); + background: linear-gradient( + to bottom, + transparent, + rgb(var(--background-end-rgb)) + ) + rgb(var(--background-start-rgb)); +} -- cgit v1.2.3-54-g00ecf