Added multiple map layout and basic data flow

src/components/map/MapSelect.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { Flex, Image as UIImage } from "theme-ui";
+
+import AddIcon from "../../icons/AddIcon";
+
+function MapSelect({ maps, onMapAdd }) {
+  const tileProps = {
+    m: 2,
+    sx: {
+      width: "150px",
+      height: "150px",
+      borderRadius: "4px",
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    bg: "muted",
+  };
+
+  function tile(map) {
+    return (
+      <Flex // TODO: use DB key
+        key={map.source}
+        {...tileProps}
+      >
+        <UIImage
+          sx={{ width: "100%", objectFit: "contain" }}
+          src={map.source}
+        />
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex
+      my={2}
+      bg="muted"
+      sx={{
+        flexWrap: "wrap",
+        width: "500px",
+        maxHeight: "300px",
+        borderRadius: "4px",
+        // TODO: move to simple scroll
+        overflowY: "scroll",
+        flexGrow: 1,
+      }}
+    >
+      {maps.map(tile)}
+      <Flex onClick={onMapAdd} {...tileProps}>
+        <AddIcon />
+      </Flex>
+    </Flex>
+  );
+}
+
+export default MapSelect;