feat: flesh out basic layout

Decided to mirror wasatch choice for now.

add reactstrap, icons, and title font

#3

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "cSpell.words": ["fontawesome", "fortawesome"]
 }

package.json

@@ -4,14 +4,18 @@
   "private": true,
   "dependencies": {
     "@arcgis/core": "^4.23.7",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.0.1",
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^5.1.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-scripts": "5.0.1",
+    "reactstrap": "^9.0.2",
     "sass": "^1.50.0",
+    "typeface-montserrat": "^1.1.13",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,18 +1,31 @@
 import Map from '@arcgis/core/Map';
 import MapView from '@arcgis/core/views/MapView';
 import React from 'react';
+import 'typeface-montserrat';
 import './App.scss';
+import Filter from './components/Filter';
 import config from './services/config';
 
 function App() {
+  const [mapView, setMapView] = React.useState(null);
+
   React.useEffect(() => {
     const map = new Map({
       basemap: 'streets-vector',
     });
-    new MapView({ map, container: 'mapDiv', ...config.DEFAULT_EXTENT });
+    setMapView(new MapView({ map, container: 'mapDiv', ...config.DEFAULT_EXTENT }));
   }, []);
 
-  return <div id="mapDiv" className="w-100 h-100"></div>;
+  return (
+    <div className="d-flex flex-column w-100 h-100">
+      <div className="m-3 title">
+        <h4 className="my-0">RTP Projects</h4>
+      </div>
+      <div id="mapDiv" className="flex-fill border-top border position-relative">
+        <Filter mapView={mapView} />
+      </div>
+    </div>
+  );
 }
 
 export default App;