Skip to content

Commit 775ef3c

Browse files
garrcastrogarrcastro
committed
criação do route e coordinator, limpeza da função app, renderização da pokedex page como index
1 parent 2ab6cd3 commit 775ef3c

File tree

6 files changed

+64
-45
lines changed

6 files changed

+64
-45
lines changed

‎pokedex/src/App.js‎

Lines changed: 12 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import React from "react";
2-
import header from './Components/Header/Header'
3-
import PokemonCard from "./Components/PokemonCard/PokemonCard";
4-
import pokedexPage from "./Pages/PokedexPage/PokedexPage";
5-
import pokemonDetailPage from "./Pages/PokemonDetailPage/PokemonDetailPage";
6-
import pokemonsListPage from "./Pages/PokemonsListPage/PokemonsListPage";
7-
import styled, { createGlobalStyle } from "styled-components";
8-
import pokemons from "./pokemon/pokemon.json";
9-
import { getColors } from "./utils/ReturnCardColor";
2+
3+
4+
import PokedexPage from "./Pages/PokedexPage/PokedexPage";
5+
6+
import { createGlobalStyle } from "styled-components";
7+
108
import './index.css'
9+
import { Router } from "./Routes/Route";
1110

1211
const GlobalStyle = createGlobalStyle`
1312
*{
@@ -19,42 +18,18 @@ const GlobalStyle = createGlobalStyle`
1918
font-family: "Montserrat", sans-serif;
2019
}
2120
`;
22-
const CardsContainer = styled.div`
23-
display: grid;
24-
grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
25-
justify-items: center;
26-
background-color: #5E5E5E;
27-
`;
28-
const Title = styled.h1`
29-
font-family: 'Poppins', sans-serif;
30-
font-weight: 700;
31-
font-size: 48px;
32-
color: #FFFFFF;
33-
padding: 1em;
34-
background-color: #5E5E5E;
3521

36-
`
22+
3723

3824
function App() {
3925
return (
4026
<div className="App">
27+
<Router></Router>
4128
<GlobalStyle/>
42-
{header()}
43-
<Title>Todos Pokémons</Title>
44-
<CardsContainer>
45-
46-
{pokemons.map((pokemon) => {
47-
return <PokemonCard
48-
cardColor={getColors(pokemon.type[0])}
49-
key={pokemon.id}
50-
pokemon={pokemon}
51-
/>
52-
})}
53-
</CardsContainer>
5429

55-
{pokedexPage()}
56-
{pokemonDetailPage()}
57-
{pokemonsListPage()}
30+
<PokedexPage/>
31+
32+
5833
</div>
5934
);
6035
}

‎pokedex/src/Components/Header/Header.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ButtonPokedex, ButtonVoltar, HeaderStyle } from "./headerStyle"
22
import logo from '/Users/Dev.Garr/Desktop/Labenu/projeto-react/projeto-react-apis/pokedex/src/assets/logo.png'
33

4-
export default function header (){
4+
export default function Header (){
55
return (
66
<div>
77
<HeaderStyle>

‎pokedex/src/Pages/PokedexPage/PokedexPage.js‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,25 @@
1-
import { PokedexStyle } from "./pokedexStyle"
1+
import { CardsContainer, Title } from "./pokedexStyle"
2+
import Header from "../../Components/Header/Header"
3+
import PokemonCard from "C:/Users/Dev.Garr/Desktop/Labenu/projeto-react/projeto-react-apis/pokedex/src/Components/PokemonCard/PokemonCard.js";
4+
import pokemons from "C:/Users/Dev.Garr/Desktop/Labenu/projeto-react/projeto-react-apis/pokedex/src/pokemon/pokemon.json";
5+
import { getColors } from "C:/Users/Dev.Garr/Desktop/Labenu/projeto-react/projeto-react-apis/pokedex/src/utils/ReturnCardColor.js";
26

3-
export default function pokedexPage (){
7+
export default function PokedexPage (){
48
return (
59
<div>
6-
<PokedexStyle>
7-
8-
Pokedex
9-
</PokedexStyle>
10+
11+
<Header></Header>
12+
<Title>Todos Pokémons</Title>
13+
<CardsContainer>
14+
{pokemons.map((pokemon) => {
15+
return <PokemonCard
16+
cardColor={getColors(pokemon.type[0])}
17+
key={pokemon.id}
18+
pokemon={pokemon}
19+
/>
20+
})}
21+
</CardsContainer>
22+
1023
</div>
1124
)
1225
}

‎pokedex/src/Pages/PokedexPage/pokedexStyle.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
import styled from "styled-components";
22

33

4-
export const PokedexStyle = styled.main`
4+
export const CardsContainer = styled.div`
5+
display: grid;
6+
grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
7+
justify-items: center;
8+
background-color: #5E5E5E;
9+
`;
10+
export const Title = styled.h1`
11+
font-family: 'Poppins', sans-serif;
12+
font-weight: 700;
13+
font-size: 48px;
14+
color: #FFFFFF;
15+
padding: 1em;
16+
background-color: #5E5E5E;
17+
518
`

‎pokedex/src/Routes/Coordinator.js‎

Whitespace-only changes.

‎pokedex/src/Routes/Route.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
2+
import { BrowserRouter, Route, Routes } from "react-router-dom";
3+
import pokedexPage from "../Pages/PokedexPage/PokedexPage";
4+
import pokemonDetailPage from "../Pages/PokemonDetailPage/PokemonDetailPage";
5+
import pokemonsListPage from "../Pages/PokemonsListPage/PokemonsListPage";
6+
7+
8+
export const Router = () =>{
9+
return(
10+
<BrowserRouter>
11+
<Routes>
12+
<Route index element={pokedexPage}></Route>
13+
<Route path="/details" element={pokemonDetailPage}></Route>
14+
<Route path="/list" element={pokemonsListPage}></Route>
15+
</Routes>
16+
</BrowserRouter>
17+
)
18+
}

0 commit comments

Comments
 (0)