Kseniya Platonava Sprint Challenge Intro to React

package.json

@@ -6,7 +6,7 @@
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^13.1.8",
-    "axios": "^0.21.1",
+    "axios": "^0.21.4",
     "msw": "^0.28.2",
     "mutationobserver-shim": "^0.3.7",
     "react": "^17.0.2",

src/App.js

@@ -1,7 +1,21 @@
-import React from 'react';
+import React,{ useState, useEffect } from 'react';
 import './App.css';
+import axios from 'axios'
+import Character from '../src/components/Character'
+
 
 const App = () => {
+  const [items, setItems] =useState([])
+  useEffect(() => {
+    axios.get(`https://swapi.dev/api/people`)
+      .then(res => {
+        setItems(res.data);
+      }).catch(err => {
+        console.error(err);
+      })
+  }, []
+  )
+
   // Try to think through what state you'll need for this app before starting. Then build out
   // the state properties here.
 
@@ -11,7 +25,8 @@ const App = () => {
 
   return (
     <div className="App">
-      <h1 className="Header">Characters</h1>
+      <h1 className="Header">Start Wars Major Characters List</h1>
+     <Character items ={items}/>
     </div>
   );
 }

src/components/Character.js

@@ -1 +1,22 @@
-// Write your Character component here
+import styled from 'styled-components';
+import CharacterCard from './CharacterCard.js'
+import theme from '../theme/index.js';
+
+const StyledCharacter = styled.div`
+display: flex;
+flex-direction:column;
+width:60%;
+align-items: center;
+color: ${theme.secondaryColor};
+border-radius: 10%;
+`
+export default function Character({items}) {
+
+return(
+    <StyledCharacter>
+     {items.map((item)=>(
+        <CharacterCard item = {item} key={item.id}/>
+     ))
+     }
+    </StyledCharacter>
+)}

src/components/CharacterCard.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import styled from 'styled-components';
+import theme from '../theme/index.js';
+
+const StyledCharacterCard = styled.div`
+width: 100%;
+border: 5px solid ${theme.primaryColor};
+padding-bottom: 5%;
+border-radius: 10%;
+margin-bottom: 5%;
+`
+const StyledName = styled.h3`
+
+&:hover {
+    color: ${theme.tertiaryColor};
+      transform: scale(1.5);
+    }
+
+`
+const StyledP = styled.p`
+
+&:hover {
+    color: ${theme.primaryColor};
+      transform: scale(1.2);
+    }
+
+`
+
+ const CharacterCard = ({item}) => {
+     return (
+    <StyledCharacterCard className='card'>
+<StyledName>{item.name}</StyledName>
+<StyledP> Gender: {item.gender}</StyledP>
+<StyledP> Height: {item.height}</StyledP>
+<StyledP> Mass: {item.mass}</StyledP>
+<StyledP> Birth Year: {item.birth_year}</StyledP>
+<StyledP> Eye Color: {item.eye_color}</StyledP>
+<StyledP> Hair Color: {item.hair_color}</StyledP>
+<StyledP> Mass: {item.mass}</StyledP>
+<StyledP> Skin Color: {item.skin_color}</StyledP>
+     </StyledCharacterCard>
+ )}
+
+ export default CharacterCard;

src/index.js

@@ -4,7 +4,14 @@ import ReactDOM from "react-dom";
 import "./index.css";
 import App from "./App";
 
+import theme from './theme';
+import { ThemeProvider } from 'styled-components';
+
+
 import { worker } from "./mocks/browser";
 worker.start();
 
-ReactDOM.render(<App />, document.getElementById("root"));
+ReactDOM.render(
+<ThemeProvider theme={theme}>
+    <App />
+</ThemeProvider>, document.getElementById("root"));

src/theme/index.js

@@ -0,0 +1,8 @@
+export default {
+    primaryColor: '#793698',
+    secondaryColor: '#9744be',
+    tertiaryColor: '#ac68cc',
+    black: 'black',
+    white: 'white',
+    breakpointMobile: '(max-width: 550px)'
+}