├── design ├── 1.png ├── 2.png └── 3.png ├── public └── images │ ├── 1.jpeg │ ├── 3.png │ ├── logo.png │ └── favicon.ico ├── jsconfig.json ├── src ├── services │ └── index.js ├── pages │ ├── api │ │ └── hello.js │ ├── index.js │ ├── _app.js │ ├── sobre │ │ ├── styled.js │ │ └── index.js │ └── detalhes │ │ ├── styled.js │ │ └── [detalhesId].js ├── components │ ├── Layout.js │ ├── navbar.js │ └── cardFilmes │ │ ├── index.js │ │ └── styled.js └── styles │ ├── globals.css │ └── Navbar.module.css ├── next.config.js ├── package.json ├── .gitignore └── README.md /design/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techjuliana/starWars/HEAD/design/1.png -------------------------------------------------------------------------------- /design/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techjuliana/starWars/HEAD/design/2.png -------------------------------------------------------------------------------- /design/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techjuliana/starWars/HEAD/design/3.png -------------------------------------------------------------------------------- /public/images/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techjuliana/starWars/HEAD/public/images/1.jpeg -------------------------------------------------------------------------------- /public/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techjuliana/starWars/HEAD/public/images/3.png -------------------------------------------------------------------------------- /public/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techjuliana/starWars/HEAD/public/images/logo.png -------------------------------------------------------------------------------- /public/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techjuliana/starWars/HEAD/public/images/favicon.ico -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./src/*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/services/index.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | export const api = axios.create({ 4 | baseURL:'https://swapi.dev/api/films', 5 | }); -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /src/pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import CardFilmes from "@/components/cardFilmes"; 2 | import Navbar from "@/components/navbar"; 3 | export default function Home() { 4 | return ( 5 | <> 6 | 7 | 8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /src/pages/_app.js: -------------------------------------------------------------------------------- 1 | import "../styles/globals.css"; 2 | 3 | import Layout from "../components/Layout"; 4 | 5 | function MyApp({ Component, pageProps }) { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | } 12 | 13 | export default MyApp; 14 | -------------------------------------------------------------------------------- /src/components/Layout.js: -------------------------------------------------------------------------------- 1 | import Head from 'next/head' 2 | import Navbar from './navbar' 3 | 4 | export default function Layout({ children }) { 5 | return ( 6 | <> 7 | 8 | 9 | StarWars 10 | 11 | 12 |
{children}
13 | 14 | ) 15 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "starwars", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "axios": "^1.3.4", 13 | "next": "^13.2.4", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0", 16 | "styled-components": "^5.3.9" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | -------------------------------------------------------------------------------- /src/pages/sobre/styled.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Container = styled.div` 4 | color: #f7e926; 5 | padding: 0.7rem; 6 | display: flex; 7 | flex-direction: column; 8 | align-items: center; 9 | justify-content: center; 10 | margin-top: 1rem; 11 | border-radius: 1rem; 12 | text-align:center; 13 | width:100%; 14 | h1{ 15 | margin:2rem; 16 | } 17 | h3{ 18 | margin-bottom:1rem; 19 | } 20 | p{ 21 | margin-bottom:4rem; 22 | } 23 | `; -------------------------------------------------------------------------------- /src/pages/sobre/index.js: -------------------------------------------------------------------------------- 1 | import * as S from "./styled"; 2 | import Image from "next/image"; 3 | export default function Sobre() { 4 | return ( 5 | 6 |

About the project:

7 |

Developed by Juliana Bitencourt

8 |

9 | StarWars Page is an App built on Next.js to consult movies and actors of 10 | this saga. 11 |

12 | Star Wars 18 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /src/styles/globals.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --max-width: 1100px; 3 | font-family: Helvetica; 4 | } 5 | * { 6 | box-sizing: border-box; 7 | padding: 0; 8 | margin: 0; 9 | } 10 | 11 | img { 12 | border-radius: 1rem; 13 | margin-top: 0.6rem; 14 | margin-bottom: 0.6rem; 15 | } 16 | 17 | html, 18 | body { 19 | max-width: 100vw; 20 | overflow-x: hidden; 21 | } 22 | 23 | body { 24 | color: rgb(241, 239, 239); 25 | background-color: rgb(16, 16, 16); 26 | } 27 | 28 | a { 29 | color: inherit; 30 | text-decoration: none; 31 | } 32 | 33 | html { 34 | color-scheme: black; 35 | } 36 | -------------------------------------------------------------------------------- /src/styles/Navbar.module.css: -------------------------------------------------------------------------------- 1 | .navbar { 2 | display: flex; 3 | justify-content: space-between; 4 | align-items: center; 5 | padding: 1em 1.2em; 6 | margin-bottom: 2em; 7 | color: #fff; 8 | } 9 | 10 | .logo { 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | .logo h1 { 17 | margin-left: 0.5em; 18 | } 19 | 20 | .link_items { 21 | display: flex; 22 | list-style: none; 23 | } 24 | 25 | .link_items li { 26 | margin-right: 1.3em; 27 | } 28 | 29 | .link_items a { 30 | color: #F7EA25; 31 | text-decoration: none; 32 | padding: 5px; 33 | transition: 0.4s; 34 | border-bottom: 2px solid transparent; 35 | } -------------------------------------------------------------------------------- /src/components/navbar.js: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import styles from "../styles/Navbar.module.css"; 3 | import Image from "next/image"; 4 | 5 | export default function Navbar() { 6 | return ( 7 | 29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /src/pages/detalhes/styled.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Container = styled.div` 4 | color: #f7e926; 5 | padding: 0.7rem; 6 | display: flex; 7 | flex-direction: column; 8 | align-items: center; 9 | justify-content: center; 10 | margin-top: 1rem; 11 | border-radius: 1rem; 12 | text-align: center; 13 | width: 100%; 14 | h1 { 15 | margin: 2rem; 16 | } 17 | h3 { 18 | margin-bottom: 1rem; 19 | } 20 | h5{ 21 | margin:1rem; 22 | } 23 | `; 24 | 25 | export const Linha = styled.div` 26 | display: flex; 27 | flex-direction: row; 28 | align-items: center; 29 | justify-content: center; 30 | p { 31 | max-width: 20rem; 32 | text-align: start; 33 | margin: 2rem; 34 | } 35 | img { 36 | width: 20rem; 37 | max-height: 40rem; 38 | } 39 | `; 40 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | StarWars Films 3 | 4 | 5 | ## Sobre o projeto 6 | Desenvolvido para treinar as habilidades de Next.JS 7 | - API do Star Wars 8 | - Pages 9 | - Params 10 | - StyledComponents 11 | - Rotas Dinamicas 12 | - Dados Dinamicos 13 | - JavaScript 14 | 15 | ### Screen Films ⬇️ 16 | 17 | 18 | ### Screen Details ⬇️ 19 | 20 | 21 | ### Screen About ⬇️ 22 | 23 | 24 | ## Getting Started 25 | 26 | First, run the development server: 27 | 28 | ```bash 29 | npm run dev 30 | # or 31 | yarn dev 32 | # or 33 | pnpm dev 34 | ``` 35 | 36 | 37 | ## Tech Juliana 38 | 39 | 40 | Juliana Bitencourt 🚀 41 | 42 | Elaborado por Juliana Bitencourt 43 |
Entre em contato!👋🏽
44 | -------------------------------------------------------------------------------- /src/components/cardFilmes/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import Link from "next/link"; 3 | import * as S from "./styled"; 4 | import { api } from "@/services"; 5 | 6 | export default function CardFilmes() { 7 | const [film, setFilm] = useState([]); 8 | 9 | useEffect(() => { 10 | api.get().then((res) => { 11 | setFilm(res.data.results); 12 | }); 13 | }, []); 14 | 15 | return ( 16 | 17 | 18 | {film.map((item, index) => ( 19 | 20 |

{item.title}

21 | 26 | director: {item.director} 27 | 28 | Details 29 | 30 | 31 | ))} 32 | 33 | 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /src/pages/detalhes/[detalhesId].js: -------------------------------------------------------------------------------- 1 | import * as S from "./styled"; 2 | import { useRouter } from "next/router"; 3 | import React, { useEffect, useState } from "react"; 4 | export default function Detalhes() { 5 | const [film, setFilm] = useState([]); 6 | const route = useRouter(); 7 | const { detalhesId } = route.query; 8 | 9 | useEffect(() => { 10 | fetch(`https://swapi.dev/api/films/${detalhesId}`) 11 | .then((res) => res.json()) 12 | .then((data) => { 13 | setFilm(data); 14 | setAtor(data.characters); 15 | }); 16 | }, []); 17 | return ( 18 | 19 |
20 |

{film.title}

21 | 22 | 27 |

{film.opening_crawl}

28 | 29 |
30 | 31 |
director: {film.director}
32 |
Producer: {film.producer}
33 | 34 | 35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /src/components/cardFilmes/styled.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const ContainerBtn = styled.button` 4 | background: #000; 5 | color: #f7e926; 6 | padding: 0.7rem; 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | margin-top: 1rem; 11 | border-radius: 1rem; 12 | width: 100%; 13 | `; 14 | 15 | export const CardContainer = styled.div` 16 | box-sizing: border-box; 17 | display: grid; 18 | justify-content: center; 19 | display: flex; 20 | `; 21 | 22 | export const Card = styled.div` 23 | justify-content: center; 24 | background: #f7e926; 25 | color: black; 26 | margin: 1rem; 27 | border-radius: 10px; 28 | padding: 1rem; 29 | max-width: 18rem; 30 | text-align: center; 31 | box-shadow: 0 10px 16px -6px rgb(5 5 5 / 30%), 32 | 0 25px 10px -24px rgb(5 5 5 / 10%); 33 | `; 34 | 35 | export const Grid = styled.div` 36 | box-sizing: border-box; 37 | display: grid; 38 | justify-content: center; 39 | flex-wrap: wrap; 40 | grid-template-columns: 350px 350px 350px; 41 | @media (max-width: 850px) { 42 | grid-template-columns: 340px; 43 | } 44 | `; 45 | --------------------------------------------------------------------------------