Funções jsx básicas criadas, styled imports feitos. Renderização geral inicial no App.

garrcastro · garrcastro · commit d50344da23c5 · 2023-03-31T00:00:08.000-03:00
diff --git a/pokedex/src/App.js b/pokedex/src/App.js
@@ -1,9 +1,18 @@
 import React from "react";
+import header from './Components/Header/Header'
+import pokemonCard from "./Components/PokemonCard/PokemonCard";
+import pokedexPage from "./Pages/PokedexPage/PokedexPage";
+import pokemonDetailPage from "./Pages/PokemonDetailPage/PokemonDetailPage";
+import pokemonsListPage from "./Pages/PokemonsListPage/PokemonsListPage";
 
 function App() {
   return (
     <div className="App">
-      <p>Pokedex</p>
+      {header()}
+      {pokemonCard()}
+      {pokedexPage()}
+      {pokemonDetailPage()}
+      {pokemonsListPage()}
     </div>
   );
 }
diff --git a/pokedex/src/Components/Header/Header.js b/pokedex/src/Components/Header/Header.js
@@ -0,0 +1,12 @@
+import { HeaderStyle } from "./headerStyle"
+
+export default function header (){
+   return (
+   <div>
+        <HeaderStyle>
+           
+            Header
+        </HeaderStyle>
+   </div>
+   )
+}
diff --git a/pokedex/src/Components/Header/headerStyle.js b/pokedex/src/Components/Header/headerStyle.js
@@ -0,0 +1,4 @@
+import styled from "styled-components";
+
+export const HeaderStyle = styled.header`
+`
diff --git a/pokedex/src/Components/PokemonCard/PokemonCard.js b/pokedex/src/Components/PokemonCard/PokemonCard.js
@@ -0,0 +1,12 @@
+import { PokemonCardStyle } from "./pokemonCardStyle"
+
+export default function pokemonCard (){
+   return (
+   <div>
+        <PokemonCardStyle>
+           
+            PokemonCard
+        </PokemonCardStyle>
+   </div>
+   )
+}
diff --git a/pokedex/src/Components/PokemonCard/pokemonCardStyle.js b/pokedex/src/Components/PokemonCard/pokemonCardStyle.js
@@ -0,0 +1,4 @@
+import styled from "styled-components";
+
+export const PokemonCardStyle = styled.article`
+`
diff --git a/pokedex/src/Pages/PokedexPage/PokedexPage.js b/pokedex/src/Pages/PokedexPage/PokedexPage.js
@@ -0,0 +1,12 @@
+import { PokedexStyle } from "./pokedexStyle"
+
+export default function pokedexPage (){
+   return (
+   <div>
+        <PokedexStyle>
+           
+            Pokedex
+        </PokedexStyle>
+   </div>
+   )
+}
diff --git a/pokedex/src/Pages/PokedexPage/pokedexStyle.js b/pokedex/src/Pages/PokedexPage/pokedexStyle.js
@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+
+export const PokedexStyle = styled.main`
+`
diff --git a/pokedex/src/Pages/PokemonDetailPage/PokemonDetailPage.js b/pokedex/src/Pages/PokemonDetailPage/PokemonDetailPage.js
@@ -0,0 +1,12 @@
+import { PokemonDetailStyle } from "./pokemonDetailStyle"
+
+export default function pokemonDetailPage (){
+   return (
+   <div>
+        <PokemonDetailStyle>
+           
+            Pokemon Detail
+        </PokemonDetailStyle>
+   </div>
+   )
+}
diff --git a/pokedex/src/Pages/PokemonDetailPage/pokemonDetailStyle.js b/pokedex/src/Pages/PokemonDetailPage/pokemonDetailStyle.js
@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+
+
+export const PokemonDetailStyle = styled.main`
+`
diff --git a/pokedex/src/Pages/PokemonsListPage/PokemonsListPage.js b/pokedex/src/Pages/PokemonsListPage/PokemonsListPage.js
@@ -0,0 +1,12 @@
+import { PokemonsListStyle } from "./pokemonsListStyle"
+
+export default function pokemonsListPage (){
+   return (
+   <div>
+        <PokemonsListStyle>
+           
+            Pokemons List
+        </PokemonsListStyle>
+   </div>
+   )
+}
diff --git a/pokedex/src/Pages/PokemonsListPage/pokemonsListStyle.js b/pokedex/src/Pages/PokemonsListPage/pokemonsListStyle.js
@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+
+export const PokemonsListStyle = styled.main`
+`

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +import styled from "styled-components";
++
 +export const HeaderStyle = styled.header`
 +`