feat: Completing the Pokédex

felizardo27 · Jul 9, 2023 · 671d23c · 671d23c
1 parent e115965
commit 671d23c
Show file tree

Hide file tree

Showing 5 changed files with 244 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "lottie-react-native": "5.1.4",
     "react": "18.2.0",
     "react-native": "0.71.8",
+    "react-native-progress": "^5.0.0",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",

diff --git a/src/global/styles/theme.ts b/src/global/styles/theme.ts
@@ -6,6 +6,7 @@ export default {
     types: {
       water: "#58ABF6",
     },
+    detail: "#747476",
     light_text: "rgba(23,23,27,0.6)",
     backgroundCard: {
       bug: "#8BD674",

diff --git a/src/pages/About/index.tsx b/src/pages/About/index.tsx
@@ -99,7 +99,29 @@ export function About() {
           </S.Header>
 
           <S.Container>
-            <S.Title type={pokemon.types[0].type.name} > Base States </S.Title>
+            <S.Title type={pokemon.types[0].type.name}> Base States </S.Title>
+            {pokemon.stats.map((attribute) => (
+              <S.StatusBar key={attribute.stat.name}>
+                <S.Attributes>{attribute.stat.name}</S.Attributes>
+                <S.AttributeValue>{attribute.base_stat}</S.AttributeValue>
+                <S.ContentBar>
+                  <S.ProgressBar
+                    type={pokemon.types[0].type.name}
+                    borderWidth={0}
+                    progress={100}
+                    width={attribute.base_stat}
+                    color={pokemon.color}
+                  />
+                </S.ContentBar>
+              </S.StatusBar>
+            ))}
+
+            <S.Title type={pokemon.types[0].type.name}> Abilities </S.Title>
+            {pokemon.abilities.map((currentAbility) => (
+              <S.StatusBar key={currentAbility.ability.name}>
+                <S.Ability>{currentAbility.ability.name}</S.Ability>
+              </S.StatusBar>
+            ))}
           </S.Container>
         </ScrollView>
       )}

diff --git a/src/pages/About/styles.ts b/src/pages/About/styles.ts
@@ -1,12 +1,6 @@
 import styled, { css } from "styled-components/native";
-// import { TypeName } from ".";
-import ITheme from "../../shared/types/ITheme";
 import { TypeProps } from "../../shared/types/Pokemon";
-
-// type TypeProps = {
-//   theme: ITheme;
-//   type: TypeName;
-// };
+import * as Progress from "react-native-progress";
 
 export const Header = styled.View<TypeProps>`
   ${({ theme, type }: TypeProps) => css`
@@ -101,7 +95,7 @@ export const DotsImage = styled.Image`
 `;
 
 export const Container = styled.View`
-  ${({theme}: TypeProps) => css`
+  ${({ theme }: TypeProps) => css`
     flex: 1;
     padding: 20px;
     background-color: ${theme.colors.background_white};
@@ -112,7 +106,7 @@ export const Container = styled.View`
 `;
 
 export const Title = styled.Text<TypeProps>`
-  ${({theme, type}: TypeProps) => css`
+  ${({ theme, type }: TypeProps) => css`
     font-style: normal;
     font-weight: bold;
     font-size: 16px;
@@ -121,3 +115,52 @@ export const Title = styled.Text<TypeProps>`
     color: ${theme.colors.boxType[type]};
   `}
 `;
+
+export const StatusBar = styled.View`
+  width: 100%;
+  padding: 10px 20px;
+  flex-direction: row;
+  align-items: center;
+`;
+
+export const Attributes = styled.Text`
+  ${({ theme }: TypeProps) => css`
+    font-style: normal;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 14px;
+    text-transform: capitalize;
+    color: ${theme.colors.light_text};
+    width: 90px;
+  `}
+`;
+
+export const AttributeValue = styled.Text`
+  ${({ theme }: TypeProps) => css`
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 19px;
+    text-align: right;
+    color: ${theme.colors.detail};
+    margin-left: 20px;
+  `}
+`;
+
+export const ContentBar = styled.View`
+  margin-left: 20px;
+`;
+
+export const ProgressBar = styled(Progress.Bar)<TypeProps>``;
+
+export const Ability = styled.Text`
+  ${({ theme }: TypeProps) => css`
+    font-style: normal;
+    font-weight: normal;
+    font-size: 16px;
+    line-height: 19px;
+    padding: 10px 20px;
+    color: ${theme.colors.detail};
+    text-transform: capitalize;
+  `}
+`;