├── app ├── input │ ├── input.module.css │ └── page.jsx ├── exercicioClasse │ ├── exercicioClasse.module.css │ └── page.jsx ├── globals.css ├── favicon.ico ├── page.module.css ├── objetoPlural │ ├── objetoPlural.module.css │ └── page.jsx ├── aulaClasse │ ├── aulaClasse.module.css │ └── page.jsx ├── components │ ├── footer │ │ ├── Footer.module.css │ │ └── Footer.jsx │ ├── popUp │ │ ├── PopUp.jsx │ │ └── PopUp.module.css │ ├── apiCaller │ │ └── fetchApiData.jsx │ ├── popUpAula │ │ ├── PopUpAula.jsx │ │ └── popUpAula.module.css │ ├── textInput │ │ ├── TextInput.module.css │ │ └── TextInput.jsx │ ├── header │ │ ├── header.module.css │ │ └── Header.jsx │ └── counter │ │ ├── counter.module.css │ │ └── Counter.jsx ├── layout.js ├── conselhosAPI │ ├── conselhos.module.css │ └── page.jsx ├── page.jsx ├── objeto │ └── page.jsx ├── contador │ └── page.jsx ├── estado │ └── page.jsx ├── popUp │ └── page.jsx ├── rotaTeste │ └── page.jsx ├── classeAula │ └── page.jsx ├── gatinhosAPI │ └── page.jsx └── aulaAPI │ ├── aulaAPI.module.css │ └── page.jsx ├── public ├── logo.png ├── vercel.svg └── next.svg ├── jsconfig.json ├── next.config.js ├── data ├── pessoa.js ├── livro.js ├── conselho.js ├── gatinhos.js ├── pessoas.js └── livros.js ├── models ├── ListaPessoa.js ├── Agente.js ├── ListaAgentes.js ├── Pessoa.js └── Livro.js ├── package.json ├── .gitignore └── README.md /app/input/input.module.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/exercicioClasse/exercicioClasse.module.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thiago-rferreira/aula-react/HEAD/app/favicon.ico -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thiago-rferreira/aula-react/HEAD/public/logo.png -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {} 3 | 4 | module.exports = nextConfig 5 | -------------------------------------------------------------------------------- /app/page.module.css: -------------------------------------------------------------------------------- 1 | .divMain{ 2 | display: flex; 3 | flex-direction: column; 4 | height: 100vh; 5 | background-color: #f5f5f5; 6 | } -------------------------------------------------------------------------------- /data/pessoa.js: -------------------------------------------------------------------------------- 1 | const pessoa = { 2 | id: 8, 3 | nome: 'Livia', 4 | idade: 16, 5 | cidade: 'Campinas', 6 | }; 7 | 8 | export default pessoa; 9 | -------------------------------------------------------------------------------- /data/livro.js: -------------------------------------------------------------------------------- 1 | const livro = { 2 | titulo: 'Harry Potter e a Ordem da Fenix', 3 | ano: 2008, 4 | autor: 'J.K.', 5 | editora: 'Teste', 6 | }; 7 | 8 | export default livro; -------------------------------------------------------------------------------- /app/objetoPlural/objetoPlural.module.css: -------------------------------------------------------------------------------- 1 | .mainDiv{ 2 | background-color: gainsboro; 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | justify-content: center; 7 | padding: 10px; 8 | width: 30%; 9 | margin: 20px; 10 | } -------------------------------------------------------------------------------- /models/ListaPessoa.js: -------------------------------------------------------------------------------- 1 | export class ListaPessoas { 2 | constructor() { 3 | this.pessoas = []; 4 | } 5 | 6 | add(pessoa) { 7 | this.pessoas.push(pessoa); 8 | } 9 | 10 | get() { 11 | return this.pessoas; 12 | } 13 | } 14 | 15 | -------------------------------------------------------------------------------- /app/aulaClasse/aulaClasse.module.css: -------------------------------------------------------------------------------- 1 | .divMain{ 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | justify-content: center; 6 | background-color: #a58f8f; 7 | padding: 10px; 8 | margin: 10px; 9 | width: 30%; 10 | color: white; 11 | } -------------------------------------------------------------------------------- /app/components/footer/Footer.module.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | background-color: #333; 3 | color: #fff; 4 | text-align: center; 5 | padding: 10px; 6 | height: 100px; 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | flex-direction: row; 11 | } 12 | -------------------------------------------------------------------------------- /app/components/footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './Footer.module.css'; 3 | 4 | const Footer = () => { 5 | return ( 6 | 9 | ); 10 | }; 11 | 12 | export default Footer; 13 | -------------------------------------------------------------------------------- /app/exercicioClasse/page.jsx: -------------------------------------------------------------------------------- 1 | import style from './exercicioClasse.module.css'; 2 | import React from 'react' 3 | import Header from '../components/header/Header' 4 | 5 | function page() { 6 | return ( 7 |
8 |
9 |
page
10 |
11 | 12 | ) 13 | } 14 | 15 | export default page -------------------------------------------------------------------------------- /data/conselho.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | const API_URL = ` https://api.adviceslip.com/advice`; 3 | 4 | const conselho = async () => { 5 | try { 6 | const response = await axios.get(API_URL); 7 | return response.data; 8 | } catch (error) { 9 | console.error('Erro ao buscar dados da API:', error); 10 | throw error; 11 | } 12 | }; 13 | 14 | export default conselho; 15 | -------------------------------------------------------------------------------- /models/Agente.js: -------------------------------------------------------------------------------- 1 | class Agente { 2 | constructor(displayName, bustPortrait, description){ 3 | this.displayName = displayName; 4 | this.bustPortrait = bustPortrait; 5 | this.description = description; 6 | this.uuid = this.generateId(); 7 | } 8 | 9 | generateId(){ 10 | return Math.floor(Math.random() * 10000); 11 | } 12 | 13 | } 14 | 15 | 16 | export default Agente -------------------------------------------------------------------------------- /app/components/popUp/PopUp.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './PopUp.module.css'; 3 | 4 | const PopupMessage = ({ message, type}) => { 5 | var color = (type === 'success') ? styles.success : styles.error; 6 | var mainDiv = styles.mainDiv + ' ' + color; 7 | 8 | return ( 9 |
10 |

{message}

11 |
12 | ); 13 | }; 14 | 15 | export default PopupMessage; 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "estado-aula", 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.5.1", 13 | "next": "13.4.19", 14 | "react": "18.2.0", 15 | "react-dom": "18.2.0", 16 | "react-loader-spinner": "^5.4.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /data/gatinhos.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | const limite = 10; 3 | const API_URL = `https://api.thecatapi.com/v1/images/search?limit=${limite}`; 4 | 5 | const gatinhos = async () => { 6 | try { 7 | const response = await axios.get(API_URL); 8 | return response.data; 9 | } catch (error) { 10 | console.error('Erro ao buscar dados da API:', error); 11 | throw error; 12 | } 13 | }; 14 | 15 | export default gatinhos; 16 | -------------------------------------------------------------------------------- /app/components/apiCaller/fetchApiData.jsx: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | const API_URL = 'https://valorant-api.com/v1/agents?isPlayableCharacter=true'; 4 | 5 | const fetchApiData = async () => { 6 | try { 7 | const response = await axios.get(API_URL); 8 | return response.data; 9 | } catch (error) { 10 | console.error('Erro ao buscar dados da API:', error); 11 | throw error; 12 | } 13 | }; 14 | 15 | export default fetchApiData; 16 | -------------------------------------------------------------------------------- /app/layout.js: -------------------------------------------------------------------------------- 1 | import './globals.css' 2 | import { Inter } from 'next/font/google' 3 | 4 | const inter = Inter({ subsets: ['latin'] }) 5 | 6 | export const metadata = { 7 | title: 'Create Next App', 8 | description: 'Generated by create next app', 9 | } 10 | 11 | export default function RootLayout({ children }) { 12 | return ( 13 | 14 | {children} 15 | 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /app/components/popUpAula/PopUpAula.jsx: -------------------------------------------------------------------------------- 1 | import styles from './popUpAula.module.css'; 2 | 3 | const PopUpMessage = ({ typeColor, mensagem }) => { 4 | 5 | // IF ternario com variavel. 6 | let color = (typeColor === 'sucesso') ? styles.sucesso : styles.erro; 7 | let container = styles.mainDiv + ' ' + color; 8 | 9 | return ( 10 |
11 |

{mensagem || 'Mensagem' }

12 |
13 | ) 14 | 15 | }; 16 | 17 | export default PopUpMessage; -------------------------------------------------------------------------------- /app/components/textInput/TextInput.module.css: -------------------------------------------------------------------------------- 1 | /* TextInput.module.css */ 2 | 3 | .container { 4 | margin-bottom: 20px; 5 | } 6 | 7 | .label { 8 | font-weight: bold; 9 | } 10 | 11 | .input { 12 | width: 30rem; 13 | padding: 10px; 14 | border: 1px solid #ccc; 15 | border-radius: 4px; 16 | font-size: 16px; 17 | outline: none; 18 | } 19 | 20 | /* Estilo para quando o input estiver em foco (hover) */ 21 | .input:focus { 22 | border-color: #007BFF; 23 | } 24 | -------------------------------------------------------------------------------- /app/components/textInput/TextInput.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './TextInput.module.css'; 3 | 4 | const TextInput = ({ label, type, value, onChange }) => { 5 | return ( 6 |
7 | 8 | 14 |
15 | ); 16 | }; 17 | 18 | export default TextInput; 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 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /models/ListaAgentes.js: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | class ListaAgentes { 4 | constructor(){ 5 | this.listaAgentes = [] 6 | } 7 | 8 | addAgente(agente){ 9 | this.listaAgentes.push(agente) 10 | console.log("Lista Agente Class",this.listaAgentes) 11 | } 12 | 13 | getListaAgentes(){ 14 | return this.listaAgentes 15 | } 16 | 17 | removeAgente(agente){ 18 | this.listaAgentes = this.listaAgentes.filter(item => item.uuid !== agente.uuid) 19 | console.log("Lista Agente Class",this.listaAgentes) 20 | } 21 | 22 | } 23 | 24 | export default ListaAgentes -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/components/popUpAula/popUpAula.module.css: -------------------------------------------------------------------------------- 1 | .mainDiv{ 2 | background-color: rgb(30, 128, 0); 3 | width: 30%; 4 | position: fixed; 5 | bottom: 0; 6 | /* centralizar na tela com position fixed */ 7 | transform: translate(-50%, -50%); 8 | left: 50%; 9 | 10 | color: white; 11 | text-align: center; 12 | border-radius: 10px; 13 | padding: 10px; 14 | height: 60px; 15 | } 16 | 17 | /* Vou precisar de duas classes de css, erro e sucesso */ 18 | 19 | .erro{ 20 | background-color: rgb(255, 0, 0) !important; 21 | } 22 | 23 | .sucesso{ 24 | background-color: green !important; 25 | } 26 | -------------------------------------------------------------------------------- /app/conselhosAPI/conselhos.module.css: -------------------------------------------------------------------------------- 1 | .main{ 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | justify-content: center; 6 | margin: 200px; 7 | background-color: pink; 8 | border-radius: 10px; 9 | min-height: 100px; 10 | font-size: 30px; 11 | min-width: fit-content; 12 | padding: 10px; 13 | } 14 | 15 | .loading{ 16 | display: flex; 17 | flex-direction: column; 18 | align-items: center; 19 | justify-content: center; 20 | margin: 200px; 21 | border-radius: 10px; 22 | min-height: 100px; 23 | font-size: 30px; 24 | min-width: fit-content; 25 | padding: 10px; 26 | } -------------------------------------------------------------------------------- /data/pessoas.js: -------------------------------------------------------------------------------- 1 | // pessoas.js 2 | const pessoas = [ 3 | { 4 | id: 1, 5 | nome: 'João', 6 | idade: 30, 7 | cidade: 'São Paulo', 8 | }, 9 | { 10 | id: 2, 11 | nome: 'Livia', 12 | idade: 25, 13 | cidade: 'Rio de Janeiro', 14 | }, 15 | { 16 | id: 3, 17 | nome: 'Caique', 18 | idade: 28, 19 | cidade: 'Belo Horizonte', 20 | }, 21 | { 22 | id: 4, 23 | nome: 'Felipe', 24 | idade: 31, 25 | cidade: 'Belem', 26 | }, 27 | { 28 | id: 5, 29 | nome: 'Godoy', 30 | idade: 16, 31 | cidade: 'Campinas', 32 | }, 33 | ]; 34 | 35 | export default pessoas; 36 | -------------------------------------------------------------------------------- /models/Pessoa.js: -------------------------------------------------------------------------------- 1 | // Pessoa.js 2 | 3 | class Pessoa { 4 | constructor(nome, idade, cidade) { 5 | this.nome = nome; 6 | this.idade = idade; 7 | this.cidade = cidade; 8 | this.id = this.generateId(); 9 | } 10 | 11 | getInfo() { 12 | return `Nome: ${this.nome}, Idade: ${this.idade}, Cidade: ${this.cidade}`; 13 | } 14 | 15 | generateId(){ 16 | return Math.floor(Math.random() * 10000); 17 | } 18 | } 19 | 20 | export class ListPessoa { 21 | constructor() { 22 | this.pessoas = []; 23 | } 24 | 25 | add(pessoa) { 26 | this.pessoas.push(pessoa); 27 | } 28 | 29 | get() { 30 | return this.pessoas; 31 | } 32 | } 33 | 34 | export default Pessoa; 35 | 36 | -------------------------------------------------------------------------------- /app/components/popUp/PopUp.module.css: -------------------------------------------------------------------------------- 1 | .mainDiv { 2 | position: fixed; 3 | left: 50%; 4 | bottom: 0; 5 | transform: translate(-50%, -50%); 6 | padding: 16px; 7 | /* Cor de fundo teal */ 8 | color: rgb(255, 255, 255); 9 | /* Cor do texto branco */ 10 | -webkit-box-shadow: 9px 6px 27px -4px rgba(0, 0, 2, 1); 11 | -moz-box-shadow: 9px 6px 27px -4px rgba(0, 0, 2, 1); 12 | box-shadow: 9px 6px 27px -4px rgba(0, 0, 2, 1); 13 | text-align: center; 14 | width: 40%; 15 | border-radius: 10px; 16 | height: 60px; 17 | } 18 | 19 | .error{ 20 | background-color: rgb(215, 19, 19); 21 | } 22 | 23 | .success{ 24 | background-color: rgb(26, 213, 45); 25 | color: black !important; 26 | } -------------------------------------------------------------------------------- /app/page.jsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | import React, { useState } from 'react'; 3 | import PopUp from './components/popUp/PopUp'; 4 | import Header from './components/header/Header'; 5 | 6 | const App = () => { 7 | const [showPopup, setShowPopup] = useState(false); 8 | const [popupMessage, setPopupMessage] = useState(''); 9 | const [popupType, setPopupType] = useState(''); 10 | 11 | function handleShowPopup(message, type, time) { 12 | setPopupMessage(message) 13 | setPopupType(type) 14 | setShowPopup(true) 15 | setTimeout(() => { 16 | setShowPopup(false) 17 | }, time) 18 | } 19 | 20 | return ( 21 |
22 |
23 |

Projetos

24 |
25 | ); 26 | }; 27 | 28 | export default App; -------------------------------------------------------------------------------- /models/Livro.js: -------------------------------------------------------------------------------- 1 | // Faça a classe livro 2 | // Faça a classe ListaLivros 3 | 4 | class Livro { 5 | constructor(titulo, autor, ano) { 6 | this.titulo = titulo; 7 | this.autor = autor; 8 | this.ano = ano; 9 | this.id = this.generateId(); 10 | } 11 | 12 | generateId(){ 13 | return Math.floor(Math.random() * 10000); 14 | } 15 | 16 | getInfo() { 17 | return `Titulo: ${this.titulo}, 18 | Autor: ${this.autor}, 19 | Ano: ${this.ano}`; 20 | } 21 | } 22 | 23 | export class ListaLivros { 24 | constructor() { 25 | this.livros = []; 26 | } 27 | 28 | add(livro) { 29 | this.livros.push(livro); 30 | } 31 | 32 | } 33 | 34 | export default Livro; -------------------------------------------------------------------------------- /app/objeto/page.jsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | // pages/index.js 3 | import React from 'react'; 4 | import Header from '../components/header/Header'; 5 | import pessoa from 'data/pessoa'; 6 | import livro from 'data/livro'; 7 | 8 | const HomePage = () => { 9 | console.log(pessoa) 10 | return ( 11 |
12 |
13 |

Meu Livro

14 |

Titulo: {livro.titulo}

15 |

Autor: {livro.autor}

16 |

Ano: {livro.ano}

17 | 18 |

Aluno(a)

19 |

Id: {pessoa.id}

20 |

Nome: {pessoa.nome}

21 |

Idade: {pessoa.idade}

22 |

Cidade: {pessoa.cidade}

23 |
24 | ); 25 | }; 26 | 27 | export default HomePage; 28 | -------------------------------------------------------------------------------- /app/input/page.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React, { useState } from 'react'; 3 | import Header from '../components/header/Header'; 4 | import TextInput from '../components/textInput/TextInput'; 5 | 6 | function MyComponent() { 7 | const [name, setName] = useState(''); 8 | 9 | const handleNameChange = (e) => { 10 | setName(e.target.value); 11 | }; 12 | 13 | return ( 14 |
15 |
16 |

Exemplo de Uso do Componente TextInput

17 | 23 |

Nome digitado: {name}

24 |
25 | ); 26 | } 27 | 28 | export default MyComponent; 29 | -------------------------------------------------------------------------------- /data/livros.js: -------------------------------------------------------------------------------- 1 | const livros = [ 2 | { 3 | id: 1, 4 | titulo: 'Livro 1', 5 | ano: 2008, 6 | autor: 'J.K.', 7 | editora: 'Teste', 8 | }, 9 | { 10 | id: 2, 11 | titulo: 'Livro 2', 12 | ano: 2008, 13 | autor: 'Teste', 14 | editora: 'Teste', 15 | }, 16 | { 17 | id: 3, 18 | titulo: 'Livro 3', 19 | ano: 2008, 20 | autor: 'Teste', 21 | editora: 'Teste', 22 | }, 23 | { 24 | id: 4, 25 | titulo: 'Livro 4', 26 | ano: 2008, 27 | autor: 'Teste', 28 | editora: 'Teste', 29 | }, 30 | { 31 | id: 5, 32 | titulo: 'Livro 5', 33 | ano: 2008, 34 | autor: 'Teste', 35 | editora: 'Teste', 36 | }, 37 | ]; 38 | 39 | export default livros; -------------------------------------------------------------------------------- /app/components/header/header.module.css: -------------------------------------------------------------------------------- 1 | .header { 2 | background-color: rgb(0, 0, 0); 3 | color: #fff; 4 | display: flex; 5 | align-items: center; 6 | justify-content: space-between; 7 | padding: 20px; 8 | flex-direction: row; 9 | } 10 | 11 | .logoContainer { 12 | display: flex; 13 | align-items: center; /* Alinha a imagem verticalmente ao centro */ 14 | } 15 | 16 | .logo { 17 | max-width: 100px; 18 | height: auto; 19 | margin-right: 20px; /* Espaçamento entre a imagem e os itens de navegação */ 20 | } 21 | 22 | .navList { 23 | list-style: none; 24 | padding: 0; 25 | display: flex; 26 | } 27 | 28 | .navItem { 29 | text-decoration: none; 30 | color: #fff; 31 | margin: 0 10px; 32 | cursor: pointer; 33 | } 34 | 35 | .navItem:hover { 36 | text-decoration: underline; 37 | } 38 | -------------------------------------------------------------------------------- /app/contador/page.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import Header from '../components/header/Header'; 4 | import Counter from '../components/counter/Counter'; 5 | 6 | function page() { 7 | return ( 8 |
9 |
10 |

Aula de estado

11 | 17 | 18 | 24 | 25 | 31 |
32 | ) 33 | } 34 | 35 | export default page -------------------------------------------------------------------------------- /app/estado/page.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useState } from 'react'; 4 | import Header from '../components/header/Header'; 5 | 6 | export default function Estado(){ 7 | const [contador, setContador] = useState(0); 8 | 9 | const incrementa = () => { 10 | setContador(contador + 1); 11 | console.log(contador); 12 | } 13 | 14 | const decrementa = () => { 15 | // if(contador > 0){ 16 | // setContador(contador - 1); 17 | // }else{ 18 | // setContador(0); 19 | // } 20 | setContador(contador>0 ? contador - 1 : 0); 21 | } 22 | 23 | const reset = () => { 24 | setContador(0); 25 | } 26 | 27 | return( 28 |
29 |
30 |

Contagem: {contador}

31 | 32 | 33 | 34 | 35 |
36 | ) 37 | } -------------------------------------------------------------------------------- /app/components/counter/counter.module.css: -------------------------------------------------------------------------------- 1 | .counterContainer { 2 | text-align: center; 3 | margin: 20px; 4 | padding: 20px; 5 | border: 1px solid #ccc; 6 | border-radius: 5px; 7 | background-color: #f4f4f4; 8 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 9 | } 10 | 11 | .counterText { 12 | font-size: 24px; 13 | font-weight: bold; 14 | margin-bottom: 10px; 15 | } 16 | 17 | .counterButton { 18 | padding: 10px 20px; 19 | margin: 5px; 20 | font-size: 16px; 21 | cursor: pointer; 22 | border: none; 23 | border-radius: 3px; 24 | transition: background-color 0.3s ease; 25 | } 26 | 27 | .addButton { 28 | background-color: #007bff; 29 | color: white; 30 | } 31 | 32 | .add-button:hover { 33 | background-color: #f69423; 34 | } 35 | 36 | .removeButton { 37 | background-color: #007bff; 38 | color: white; 39 | } 40 | 41 | .removeButton:hover { 42 | background-color: #0056b3; 43 | } 44 | 45 | .resetButton { 46 | background-color: #dc3545; 47 | color: white; 48 | } 49 | 50 | .resetButton:hover { 51 | background-color: #c82333; 52 | } -------------------------------------------------------------------------------- /app/popUp/page.jsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | import React, { useState } from 'react'; 3 | import PopUp from '../components/popUp/PopUp'; 4 | import Header from '../components/header/Header'; 5 | 6 | const App = () => { 7 | const [showPopup, setShowPopup] = useState(false); 8 | const [popupMessage, setPopupMessage] = useState(''); 9 | const [popupType, setPopupType] = useState(''); 10 | 11 | function handleShowPopup(message, type, time) { 12 | setPopupMessage(message) 13 | setPopupType(type) 14 | setShowPopup(true) 15 | setTimeout(() => { 16 | setShowPopup(false) 17 | }, time) 18 | } 19 | 20 | return ( 21 |
22 |
23 | 26 | 29 | 30 | {showPopup && ( 31 | 35 | )} 36 |
37 | ); 38 | }; 39 | 40 | export default App; -------------------------------------------------------------------------------- /app/rotaTeste/page.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import Header from "../components/header/Header"; 3 | import PopUpAula from "../components/popUpAula/PopUpAula"; 4 | import { useState } from "react"; 5 | 6 | const rotaTeste = () => { 7 | 8 | const [exibirPopUp, setExibirPopUp] = useState(false); 9 | const [mensagemPopUp, setMensagemPopUp] = useState(''); 10 | const [tipoPopUp, setTipoPopUp] = useState(''); 11 | 12 | function handlerExibirPopUp(tipo, mensagem,tempo) { 13 | setMensagemPopUp(mensagem) 14 | setTipoPopUp(tipo) 15 | setExibirPopUp(true) 16 | setTimeout(()=>{ 17 | setExibirPopUp(false); 18 | },tempo) 19 | } 20 | 21 | return ( 22 |
23 |
24 | 25 | 26 | { 27 | exibirPopUp &&( 28 | 32 | ) 33 | 34 | } 35 | 36 |
37 | ) 38 | } 39 | 40 | export default rotaTeste; -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/components/counter/Counter.jsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { useState } from 'react'; 4 | import styles from './counter.module.css'; 5 | 6 | function Counter({ valorPadrao, agregacao, limitMin, limitMax }) { 7 | const [contador, setContador] = useState(valorPadrao); 8 | 9 | const add = () => { 10 | setContador(contador < limitMax ? contador + agregacao : contador); 11 | 12 | // if(contador < limitMax){ 13 | // setContador(contador + agregacao); 14 | // } else{ 15 | // setContador(contador); 16 | // } 17 | } 18 | 19 | const remove = () => { 20 | setContador(contador > limitMin ? contador - agregacao : contador); 21 | } 22 | 23 | const reset = () => { 24 | setContador(valorPadrao); 25 | } 26 | 27 | return ( 28 |
29 |

Contagem: {contador}

30 | 31 | 32 | 33 |
34 | ) 35 | } 36 | 37 | export default Counter; -------------------------------------------------------------------------------- /app/classeAula/page.jsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | import livrosData from 'data/livros' 3 | import Livro, { ListaLivros } from 'models/livro' 4 | 5 | function page() { 6 | // console.log(livrosData); 7 | const livroTeste = new Livro('Livro Teste', 'Autor Teste', 2020) 8 | 9 | // Criar a instancia da listaLivros 10 | const minhaListaLivros = new ListaLivros(); 11 | 12 | // Adicionar o livroTeste na lista de livros 13 | minhaListaLivros.add(livroTeste); 14 | 15 | //Adicionar o meu livroData na lista de livros 16 | livrosData.map((livro) => { 17 | minhaListaLivros.add(new Livro(livro.titulo, livro.autor, livro.ano)); 18 | }) 19 | 20 | //Adicionar a propriedade escola na minha lista de livros em todos os livros 21 | minhaListaLivros.livros.map((livro) => { 22 | livro.poder = Math.floor(Math.random() * 100000); 23 | }) 24 | 25 | return ( 26 |
27 |

Faça um map

28 | 29 | { 30 | minhaListaLivros.livros.map((livro) => ( 31 |
32 |

Titulo: {livro.titulo}

33 |

Ano: {livro.ano}

34 |

Autor: {livro.autor}

35 |

Poder: {livro.poder}

36 |
37 |
38 | )) 39 | } 40 |
41 | 42 | ) 43 | } 44 | 45 | export default page -------------------------------------------------------------------------------- /app/gatinhosAPI/page.jsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import React, { useEffect, useState } from 'react'; 3 | import Header from '../components/header/Header' 4 | import gatinhos from '@/data/gatinhos'; 5 | 6 | function page() { 7 | 8 | const [apiData, setApiData] = useState(null); 9 | 10 | useEffect(() => { 11 | const fetchData = async () => { 12 | try { 13 | const data = await gatinhos(); 14 | setApiData(data); 15 | console.log(data); 16 | } catch (error) { 17 | // Lidar com erros de chamada à API 18 | } 19 | }; 20 | fetchData(); 21 | }, []); 22 | 23 | return ( 24 | 25 |
26 |
27 |

Page

28 | { 29 | apiData ? ( 30 | 40 | ) : ( 41 |

Carregando dados da API...

42 | ) 43 | } 44 |
45 | ) 46 | } 47 | 48 | export default page -------------------------------------------------------------------------------- /app/aulaClasse/page.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from 'react'; 4 | import Header from '../components/header/Header'; 5 | import Pessoa, { ListPessoa } from 'models/Pessoa'; 6 | import teste from 'data/pessoas'; 7 | import styles from './aulaClasse.module.css' 8 | 9 | const AulaClasse = () => { 10 | // Criando um objeto da classe Pessoa e adicionando na lista de pessoas. 11 | const objetoDaClasse = new Pessoa('Exemplo', 25, 'Exemplópolis'); 12 | 13 | // Criando a instancia da lista de pessoas. 14 | const listaDePessoas = new ListPessoa(); 15 | 16 | listaDePessoas.add(objetoDaClasse); 17 | 18 | console.log(listaDePessoas); 19 | 20 | // Adicionando pessoas do arquivo teste.js na lista de pessoas. 21 | teste.map((pessoa) => { 22 | listaDePessoas.add(new Pessoa(pessoa.nome, pessoa.idade, pessoa.cidade)); 23 | }) 24 | 25 | // console.log(listaDePessoas) 26 | 27 | return ( 28 |
29 |
30 |

Minha Página

31 | { 32 | listaDePessoas.pessoas.map((pessoa) => ( 33 |
34 |

Nome: {pessoa.nome}

35 |

Idade: {pessoa.idade}

36 |

Cidade: {pessoa.cidade}

37 |
38 | )) 39 | } 40 |
41 | ); 42 | }; 43 | 44 | export default AulaClasse; 45 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | ``` 14 | 15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 16 | 17 | You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file. 18 | 19 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /app/conselhosAPI/page.jsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import React, { useEffect } from 'react' 3 | import { useState } from 'react' 4 | import Header from '../components/header/Header'; 5 | import conselho from '@/data/conselho'; 6 | import estilo from './conselhos.module.css' 7 | 8 | import { Hearts } from 'react-loader-spinner' 9 | 10 | function page() { 11 | const [apiData, setApiData] = useState(null); 12 | 13 | useEffect(() => { 14 | const fetchData = async () => { 15 | try { 16 | const data = await conselho(); 17 | setApiData(data); 18 | console.log(data); 19 | } catch (error) { 20 | // Lidar com erros de chamada à API 21 | } 22 | }; 23 | fetchData(); 24 | }, []); 25 | 26 | 27 | return ( 28 | 29 |
30 |
31 |

Api de conselhos

32 | { 33 | apiData ? ( 34 |

{apiData.slip.advice}

35 | 36 | ) : ( 37 |
38 | 47 |
48 | 49 | ) 50 | } 51 |
52 | ) 53 | } 54 | 55 | export default page -------------------------------------------------------------------------------- /app/objetoPlural/page.jsx: -------------------------------------------------------------------------------- 1 | // pages/index.js 2 | import React from 'react'; 3 | import styles from './objetoPlural.module.css'; 4 | import Header from '../components/header/Header'; 5 | import pessoas from 'data/pessoas'; 6 | import livros from 'data/livros'; 7 | 8 | 9 | const Pessoas = () => { 10 | return ( 11 |
12 |
13 |

Lista de Pessoas

14 | 27 | 28 |

Lista de livros

29 | 47 |
48 | ); 49 | }; 50 | 51 | export default Pessoas; 52 | -------------------------------------------------------------------------------- /app/aulaAPI/aulaAPI.module.css: -------------------------------------------------------------------------------- 1 | .title { 2 | color: white; 3 | } 4 | 5 | .container { 6 | display: flex; 7 | flex-direction: row; 8 | align-items: center; 9 | justify-content: center; 10 | padding: 1rem; 11 | flex-wrap: wrap; 12 | align-content: center; 13 | background-color: rgb(0, 0, 0); 14 | margin-top: 0.5px; 15 | color: rgb(255, 255, 255); 16 | } 17 | 18 | .img { 19 | width: 20rem; 20 | } 21 | 22 | .imgIcon { 23 | width: 64px; 24 | color: black; 25 | background-color: black; 26 | border-radius: 50%; 27 | display: flex; 28 | } 29 | 30 | .divIcons { 31 | display: flex; 32 | flex-direction: row; 33 | align-items: center; 34 | justify-content: center; 35 | align-content: center; 36 | list-style: none; 37 | padding: 5px; 38 | margin: 10px; 39 | } 40 | 41 | .card { 42 | margin: 1rem; 43 | background-color: #fe4655; 44 | display: flex; 45 | flex-direction: column; 46 | align-items: center; 47 | justify-content: center; 48 | border-radius: 1rem; 49 | padding: 1rem; 50 | width: 40%; 51 | height: 44rem; 52 | box-shadow: 10px 10px 5px -6px rgba(255, 255, 255, 0.36); 53 | -webkit-box-shadow: 10px 10px 5px -6px rgba(255, 255, 255, 0.36); 54 | -moz-box-shadow: 10px 10px 5px -6px rgba(255, 255, 255, 0.36); 55 | color: rgb(255, 255, 255); 56 | } 57 | 58 | .agentName { 59 | font-size: 3rem; 60 | font-weight: bold; 61 | color: rgb(255, 255, 255); 62 | text-decoration: none; 63 | list-style: none; 64 | } 65 | 66 | .ul { 67 | display: flex; 68 | flex-direction: row; 69 | flex-wrap: wrap; 70 | align-content: center; 71 | justify-content: center; 72 | align-items: flex-start; 73 | } 74 | 75 | .skills { 76 | display: flex; 77 | flex-direction: column; 78 | align-items: center; 79 | /* background-color: rgb(128, 0, 0); */ 80 | width: 100%; 81 | align-content: center; 82 | justify-content: center; 83 | flex-wrap: nowrap; 84 | margin: 1rem; 85 | } 86 | 87 | .skillDiv { 88 | min-width: 5rem; 89 | height: 7rem; 90 | display: flex; 91 | flex-direction: column; 92 | align-items: center; 93 | justify-content: center; 94 | text-align: center; 95 | padding: 10px; 96 | } -------------------------------------------------------------------------------- /app/components/header/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Link from 'next/link'; 3 | import Image from 'next/image'; 4 | import styles from './header.module.css'; 5 | 6 | const Header = () => { 7 | return ( 8 |
9 |
10 | Logo 11 |
12 | 71 |
72 | ); 73 | }; 74 | 75 | export default Header; 76 | -------------------------------------------------------------------------------- /app/aulaAPI/page.jsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | import React, { useEffect, useState } from "react"; 3 | import fetchApiData from "../components/apiCaller/fetchApiData"; 4 | import Header from "../components/header/Header"; 5 | import styles from "./aulaAPI.module.css"; 6 | import ListaAgentes from "../../models/ListaAgentes"; 7 | import Agente from "../../models/Agente"; 8 | 9 | const instanciaLista = new ListaAgentes(); // Crie uma única instância fora do componente 10 | 11 | export default function Home() { 12 | const [listaAgentes, setListaAgentes] = useState([]); // Inicialize com um array vazio 13 | 14 | const [apiData, setApiData] = useState(null); 15 | const [displayName, setDisplayName] = useState(""); 16 | const [bustPortrait, setBustPortrait] = useState(""); 17 | const [description, setDescription] = useState(""); 18 | 19 | const handleAddAgente = () => { 20 | const novoAgente = new Agente(displayName, bustPortrait, description); 21 | 22 | // Verifique se o agente já está na lista local 23 | if (!listaAgentes.some(agente => agente.displayName === displayName)) { 24 | // Se não estiver, adicione-o à lista local 25 | const updatedAgentes = [...listaAgentes, novoAgente]; 26 | setListaAgentes(updatedAgentes); 27 | } 28 | 29 | // Adicione o agente à instância compartilhada 30 | instanciaLista.addAgente(novoAgente); 31 | 32 | // Limpar os campos do formulário 33 | setDisplayName(""); 34 | setBustPortrait(""); 35 | setDescription(""); 36 | }; 37 | 38 | 39 | 40 | const removeAgente = (agente) => { 41 | instanciaLista.removeAgente(agente); // Remova o agente da instância compartilhada 42 | setListaAgentes(instanciaLista.getListaAgentes()); // Puxa a lista para o varivel local que exibe no map 43 | }; 44 | 45 | useEffect(() => { 46 | const fetchData = async () => { 47 | try { 48 | const data = await fetchApiData(); 49 | setApiData(data); 50 | } catch (error) { 51 | // Lidar com erros de chamada à API 52 | } 53 | }; 54 | fetchData(); 55 | }, []); 56 | 57 | useEffect(() => { 58 | if (apiData && apiData.data) { 59 | apiData.data.forEach((agenteData) => { 60 | const novoAgente = new Agente( 61 | agenteData.displayName, 62 | agenteData.bustPortrait, 63 | agenteData.description 64 | ); 65 | instanciaLista.addAgente(novoAgente); 66 | }); 67 | 68 | // Atualize o estado com a lista de agentes atualizada 69 | const updatedAgentes = [...listaAgentes, ...instanciaLista.getListaAgentes()]; // Combine os dados da API com os existentes 70 | setListaAgentes(updatedAgentes); 71 | } 72 | }, [apiData]); 73 | 74 | return ( 75 | <> 76 |
77 |
78 |

API Data:

79 |
80 | setDisplayName(e.target.value)} 85 | /> 86 | setBustPortrait(e.target.value)} 91 | /> 92 | setDescription(e.target.value)} 97 | /> 98 | 99 |
100 | 118 |
119 | 120 | ); 121 | } 122 | --------------------------------------------------------------------------------