Skip to content

Commit bf29370

Browse files
garrcastrogarrcastro
committed
estilização dos cards de pokemon reaproveitada.
1 parent d50344d commit bf29370

File tree

25 files changed

+2265
-15
lines changed

25 files changed

+2265
-15
lines changed

‎pokedex/src/App.js‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,43 @@
11
import React from "react";
22
import header from './Components/Header/Header'
3-
import pokemonCard from "./Components/PokemonCard/PokemonCard";
3+
import PokemonCard from "./Components/PokemonCard/PokemonCard";
44
import pokedexPage from "./Pages/PokedexPage/PokedexPage";
55
import pokemonDetailPage from "./Pages/PokemonDetailPage/PokemonDetailPage";
66
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";
10+
11+
const GlobalStyle = createGlobalStyle`
12+
*{
13+
padding: 0;
14+
margin: 0;
15+
box-sizing: border-box;
16+
font-family: "Inter", sans-serif;
17+
18+
}
19+
`;
20+
const CardsContainer = styled.div`
21+
display: grid;
22+
grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
23+
justify-items: center;
24+
`;
725

826
function App() {
927
return (
1028
<div className="App">
29+
<GlobalStyle/>
1130
{header()}
12-
{pokemonCard()}
31+
<CardsContainer>
32+
{pokemons.map((pokemon) => {
33+
return <PokemonCard
34+
cardColor={getColors(pokemon.type[0])}
35+
key={pokemon.id}
36+
pokemon={pokemon}
37+
/>
38+
})}
39+
</CardsContainer>
40+
1341
{pokedexPage()}
1442
{pokemonDetailPage()}
1543
{pokemonsListPage()}

‎pokedex/src/Components/PokemonCard/PokemonCard.js‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,30 @@
1-
import { PokemonCardStyle } from "./pokemonCardStyle"
21

3-
export default function pokemonCard (){
4-
return (
5-
<div>
6-
<PokemonCardStyle>
7-
8-
PokemonCard
9-
</PokemonCardStyle>
10-
</div>
11-
)
12-
}
2+
import React from "react";
3+
import {Container,PokemonNumber, PokemonName, PokemonType, TypesContainer, Pokeball, CatchButton, Pokemon} from './pokemonCardStyle'
4+
import pokeball from '../../assets/pngwing 2.png'
5+
import {getTypes} from '../../utils/ReturnPokemonType'
6+
7+
const PokemonCard = (props) => {
8+
9+
return (
10+
<Container color={props.cardColor}>
11+
<div>
12+
<PokemonNumber>{props.pokemon.id}</PokemonNumber>
13+
<PokemonName>{props.pokemon.name.english}</PokemonName>
14+
<TypesContainer>
15+
{props.pokemon.type.map((type) => {
16+
return <PokemonType key={type} src={getTypes(type)} alt='' />
17+
})}
18+
</TypesContainer>
19+
<p>Detalhes</p>
20+
</div>
21+
<div>
22+
<Pokemon src={`https://www.serebii.net/swordshield/pokemon/${props.pokemon.id}.png`} alt="" />
23+
<CatchButton>Capturar!</CatchButton>
24+
</div>
25+
<Pokeball src={pokeball} alt="pokeball" />
26+
</Container>
27+
);
28+
};
29+
30+
export default PokemonCard;

‎pokedex/src/Components/PokemonCard/pokemonCardStyle.js‎

Lines changed: 72 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,74 @@
11
import styled from "styled-components";
22

3-
export const PokemonCardStyle = styled.article`
4-
`
3+
export const Container = styled.div`
4+
padding: 16px;
5+
min-width: 400px;
6+
max-width: 440px;
7+
background-color: ${(props) => props.color};
8+
border-radius: 12px;
9+
display: flex;
10+
position: relative;
11+
margin: 50px;
12+
color: #ffffff;
13+
`;
14+
15+
export const PokemonNumber = styled.p`
16+
font-family: "Inter", sans-serif;
17+
font-size: 16px;
18+
font-weight: 600;
19+
text-align: left;
20+
`;
21+
22+
export const PokemonName = styled.h1`
23+
font-size: 32px;
24+
font-weight: 700;
25+
letter-spacing: 0em;
26+
text-align: left;
27+
margin-bottom: 10px;
28+
`;
29+
30+
export const PokemonType = styled.img`
31+
max-width: 100px;
32+
height: 32px;
33+
border-radius: 8px;
34+
overflow: hidden;
35+
border: 1px dashed #ffffff;
36+
margin-right: 8px;
37+
`;
38+
39+
export const TypesContainer = styled.div`
40+
margin-bottom: 52px;
41+
`;
42+
export const Pokeball = styled.img`
43+
position: absolute;
44+
top: 0;
45+
right: 0;
46+
`;
47+
48+
export const CatchButton = styled.button`
49+
display: flex;
50+
flex-direction: row;
51+
justify-content: center;
52+
align-items: center;
53+
padding: 4px 10px;
54+
width: 146px;
55+
height: 38px;
56+
background: #ffffff;
57+
border-radius: 8px;
58+
border: none;
59+
cursor: pointer;
60+
position: absolute;
61+
bottom: 10px;
62+
right: 22px;
63+
z-index: 2;
64+
color: #000;
65+
`;
66+
67+
export const Pokemon = styled.img`
68+
width: 193px;
69+
height: 193px;
70+
position: absolute;
71+
top: -60px;
72+
right: 0;
73+
z-index: 2;
74+
`

‎pokedex/src/assets/pngwing 2.png‎

9.26 KB
Loading

‎pokedex/src/assets/pokemon-types/bug.png‎

1.58 KB
Loading

‎pokedex/src/assets/pokemon-types/dark.png‎

1.64 KB
Loading

‎pokedex/src/assets/pokemon-types/dragon.png‎

1.75 KB
Loading

‎pokedex/src/assets/pokemon-types/electric.png‎

1.59 KB
Loading

‎pokedex/src/assets/pokemon-types/fairy.png‎

1.41 KB
Loading

‎pokedex/src/assets/pokemon-types/fighting.png‎

1.71 KB
Loading

0 commit comments

Comments
 (0)