Rewrite with typescript

src/components/NavBar.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useHistory } from 'react-router-dom';
+import SearchBar from './SearchBar';
+
+const Nav = styled.nav`
+    display: grid;
+    grid-template-columns: 1fr 0.7fr;
+    align-items: center;
+    padding: 0.5rem 0rem;
+
+    h1 {
+        cursor: pointer;
+        justify-self: flex-start;
+    }    
+`;
+
+const NavBar: React.FC = () => {
+    const history = useHistory();
+
+    return (
+        <Nav>
+            <h1 onClick={() => history.push('/')}>Weather</h1>
+            <SearchBar />
+        </Nav>
+    );
+}
+
+export default NavBar;