Mariana header

package.json

@@ -8,7 +8,8 @@
     "@testing-library/user-event": "^7.1.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-scripts": "^1.1.5",
+    "styled-components": "^5.3.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,26 +1,22 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import Header from './Components/header';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+class App extends React.Component {
+  render() {
+    return (
+      <div>
+        <Header/>
+      </div>
+    );
+  }
 }
 
+
+// function App() {
+//   return (
+//     <div>
+//     </div>
+//   );
+// }
+
 export default App;

src/Components/header.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import styled from 'styled-components';
+import carrinho from '../img/twotone_shopping_cart_white_24dp.png'
+import account from '../img/twotone_account_circle_white_24dp.png'
+import terra from '../img/Imagens-do-planeta-Terra-em-alta-resolução-6.jpg'
+
+
+
+
+
+
+const Div = styled.div`
+    background-color: #17073D;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.0975);
+
+`;
+const BarraHeader = styled.div`
+    max-width: 1010px;
+    padding: 5px 15px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    margin: 0 auto;
+    color: white;
+`;
+const BarraEsquerda = styled.div`
+    width: 33.333%;
+    text-align: left;
+    margin-right: 200px; 
+`;
+const BarraCentro = styled.div`
+    width: 33.333%;
+    text-align: center;
+`;
+
+const BarraDireita = styled.div`
+    width: 33.333%;
+    text-align: right;
+    display: flex;
+    justify-content: space-around;
+    margin-left: 250px;    
+`;
+
+
+
+function Header() {
+    return (
+        <Div>
+        <BarraHeader>
+            <BarraEsquerda>
+                <h2> SpaceStore </h2>
+            </BarraEsquerda>
+            <BarraCentro> 
+                <img src = {terra}/>      
+            </BarraCentro>
+            <BarraDireita>
+                <img src = {account}/>
+                <img src = {carrinho} />           
+            </BarraDireita>
+        </BarraHeader>
+        </Div>
+    );
+};
+
+export default Header;