Add components

src/App.js

@@ -1,25 +1,43 @@
-import logo from './logo.svg';
+import { Component } from 'react'
 import './App.css';
+import { CardList } from './components/card-list/card-list.component'
+import { SearchBox } from './components/search-box/search-box.component'
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      monsters: [],
+      searchField: ''
+    }
+  }
+
+  componentDidMount() {
+    fetch('https://jsonplaceholder.typicode.com/users')
+      .then(response => response.json()).then(
+        users => this.setState({ monsters: users })
+      )
+  }
+
+
+  render() {
+    const { monsters, searchField } = this.state;
+    const filteredMonsters = monsters.filter(monster =>
+      monster.name.toLowerCase().includes(searchField.toLowerCase())
+    );
+
 
-function App() {
     return (
       <div className="App">
-      <header className="App-header">
+        <SearchBox
-        <img src={logo} className="App-logo" alt="logo" />
+          placeholder='Search Monsters'
-        <p>
+          handleChange={e => this.setState({ searchField: e.target.value })}
-          Edit <code>src/App.js</code> and save to reload.
+        />
-        </p>
+        <CardList monsters={filteredMonsters} />
-        <a
+      </div >
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
     );
+  }
 }
 
 export default App;

src/components/card-list/card-list.component.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Card } from '../card/card.component'
+
+
+import './card-list.styles.css'
+
+export const CardList = (props) => {
+    return <div className='card-list'> {
+        props.monsters.map(monster => {
+            return <Card key={monster.id} monster={monster} />
+        })
+    }</div>
+}
+

src/components/card-list/card-list.styles.css

@@ -0,0 +1,8 @@
+.card-list {
+    width: 85vw;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-gap: 20px;
+  }
+  

src/components/card/card.component.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import './card.styles.css'
+
+export const Card = props => {
+    return (
+        <div className='card-container'>
+            <img alt="monser" src={`https://robohash.org/${props.monster.id}?set=set2`}></img>
+            <h2>{props.monster.name}</h2>
+            <p>{props.monster.email}</p>
+        </div>
+    );
+};

src/components/card/card.styles.css

@@ -0,0 +1,23 @@
+.card-container {
+  display: flex;
+  flex-direction: column;
+  background-color: #95dada;
+  border: 1px solid grey;
+  border-radius: 5px;
+  padding: 25px;
+  cursor: pointer;
+  -moz-osx-font-smoothing: grayscale;
+  backface-visibility: hidden;
+  transform: translateZ(0);
+  transition: transform 0.25s ease-out;
+}
+
+.card-container:hover {
+  transform: scale(1.05);
+}
+
+.card-container img {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 200px;
+}

src/components/search-box/search-box.component.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import './search-box.styles.css'
+
+export const SearchBox = ({ placeholder, handleChange }) => {
+    return (
+        <input
+            className="search"
+            type='search'
+            placeholder={placeholder}
+            onChange={handleChange}
+        />
+    );
+};
+

src/components/search-box/search-box.styles.css

@@ -0,0 +1,9 @@
+.search {
+    -webkit-appearance: none;
+    border: none;
+    outline: none;
+    padding: 10px;
+    width: 150px;
+    line-height: 30px;
+    margin-bottom: 30px;
+}