Resolve "Criar tela de busca"

Closes #10 (closed)

src/Pages/Search.js

@@ -18,11 +18,13 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
 
 import React, { useEffect, useState, useContext } from 'react';
 import axios from 'axios';
+import  { Link } from 'react-router-dom';
+import styled from 'styled-components';
 
 // import ResourceCard from '../Components/ResourceCard'
 // import CollectionCard from '../Components/CollectionCard'
 // import UserCard from '../Components/UserCard'
-
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
 import {apiUrl} from '../env';
 import './Styles/Home.css';
 import { Store } from '../Store';
@@ -38,7 +40,7 @@ export default function Search(props){
   useEffect(()=>{
     dispatch({
       type: 'HANDLE_SEARCH_BAR',
-      opened: true
+      opened: false
     })
 
     const urlParams = new URLSearchParams(window.location.search)
@@ -71,6 +73,7 @@ export default function Search(props){
 
 
   return (
+    <div style={{backgroundColor:"#f4f4f4"}}>
     <React.Fragment>
       <h1>Search for {state.search.query!=='*'?state.search.query:'all'} in {state.search.class}</h1>
       {
@@ -90,5 +93,81 @@ export default function Search(props){
         </ul>
       }
     </React.Fragment>
+
+    <Secao>
+      <BreadCrumbsDiv>
+        <StyledBreadCrumbs>
+          <Link to="/" >
+              Página Inicial
+          </Link>
+
+          
+          <span>
+            Busca
+          </span>
+
+        </StyledBreadCrumbs>
+
+      </BreadCrumbsDiv>
+      <HeaderFilters>
+        <div>Mostrar</div>
+        <div>Numero</div>
+        <div>Ordenarpor:</div>
+      </HeaderFilters>
+    </Secao>
+
+    </div>
+  
   )
 }
+
+const HeaderFilters = styled.div`
+  height: 40px;
+  text-align: center;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+  padding: 30px;
+  margin-bottom: 30px;
+  color: #666;
+  display: flex;
+  flex-direction: row;
+
+
+
+  img {
+    height: 50px;
+    width: 50px;
+    margin-right: 40px;
+    vertical-align: middle;
+
+  }
+
+  
+`
+
+
+const StyledBreadCrumbs = styled(Breadcrumbs)`
+  display : flex;
+  justify-content : flex-start;
+  max-width : 1170px;
+  span {
+    color : #a5a5a5;
+  }
+  a {
+    color: #00bcd4;
+    text-decoration: none;
+  }
+
+`
+
+const BreadCrumbsDiv = styled.div`
+
+  padding : 10px;
+  display : flex;
+`
+
+const Secao = styled.div`
+  width: 1138px;
+  margin-inline: auto;
+
+`
\ No newline at end of file