Add search functionality and styling

src/App.css

@@ -34,7 +34,31 @@ body: {
   padding: 10px;
 }
 
+.App-search {
+  padding: 10px 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.App-search > h3 > div:first-child {
+  margin: 5px 15px 0 0;
+}
+
 @keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media screen and (min-width: 500px) {
+  .App-search {
+    flex-direction: row;
+  }
+  .App-search-input {
+    width: 300px;
+  }
 }

src/App.js

@@ -1,20 +1,25 @@
-import React, { useState, useEffect } from 'react';
-import { usePage } from './hooks/use-page';
-import { Container, Card, Header, Icon, Pagination } from 'semantic-ui-react';
-import 'semantic-ui-css/semantic.min.css';
-import parse from 'parse-link-header';
-import './App.css';
-import { PetCard } from './components/PetCard';
-import fetchPets from './services/pets';
-import { cacheRequest } from './_sessionStorage';
-import { PETS } from './constants';
+import React, { useState, useEffect } from "react";
+import {
+  Container,
+  Card,
+  Header,
+  Icon,
+  Pagination,
+  Input
+} from "semantic-ui-react";
+import "semantic-ui-css/semantic.min.css";
+import parse from "parse-link-header";
+import "./App.css";
+import { PetCard } from "./components/PetCard";
+import fetchPets from "./services/pets";
 
 function App() {
   const LIMIT = 9;
 
   const [pets, setPets] = useState([]);
   const [page, setPage] = usePage();
   const [totalPages, setTotalPages] = useState(1);
+  const [searchText, setSearchText] = useState("");
 
   useEffect(() => {
     async function fetchData() {
@@ -33,6 +38,18 @@ function App() {
     setPage(data.activePage);
   };
 
+  const findPetBy = (pet, _search) =>
+    pet.toLowerCase().includes(_search.toLowerCase());
+
+  const searchPets =
+    pets &&
+    pets.filter(
+      pet =>
+        findPetBy(pet.name, searchText) ||
+        findPetBy(pet.owner, searchText) ||
+        findPetBy(pet.type, searchText)
+    );
+
   return (
     <div className="App">
       <header className="App-header">
@@ -41,9 +58,23 @@ function App() {
           <Header.Content>DeveloPets</Header.Content>
         </Header>
       </header>
+      <div className="App-search">
+        <Header as="h3">
+          <Header.Content>Looking for a specific pet?</Header.Content>
+        </Header>
+        <Input
+          className="App-search-input"
+          icon="search"
+          placeholder="Search by name, owner, or species..."
+          type="text"
+          onChange={e => setSearchText(e.target.value)}
+        />
+      </div>
       <div className="App-content">
         <Container>
-          <Card.Group className="centered" stackable>{pets.map(pet => PetCard(pet))}</Card.Group>
+          <Card.Group className="centered" stackable>
+            {searchPets.map(pet => PetCard(pet))}
+          </Card.Group>
         </Container>
       </div>
       <div className="App-pagination">