Refactor map and token image

src/components/map/MapImage.js

@@ -4,7 +4,7 @@ import { Image } from "theme-ui";
 import { useDataURL } from "../../contexts/AssetsContext";
 import { mapSources as defaultMapSources } from "../../maps";
 
-function MapTileImage({ map, sx }) {
+const MapTileImage = React.forwardRef(({ map, ...props }) => {
   const mapURL = useDataURL(
     map,
     defaultMapSources,
@@ -12,7 +12,7 @@ function MapTileImage({ map, sx }) {
     map.type === "file"
   );
 
-  return <Image sx={sx} src={mapURL}></Image>;
-}
+  return <Image src={mapURL} {...props} />;
+});
 
 export default MapTileImage;

src/components/map/MapTile.js

@@ -1,7 +1,7 @@
 import React from "react";
 
 import Tile from "../tile/Tile";
-import MapTileImage from "./MapTileImage";
+import MapImage from "./MapImage";
 
 function MapTile({
   map,
@@ -23,7 +23,7 @@ function MapTile({
       badges={badges}
       editTitle="Edit Map"
     >
-      <MapTileImage map={map} />
+      <MapImage map={map} />
     </Tile>
   );
 }

src/components/map/MapTileGroup.js

@@ -2,7 +2,7 @@ import React from "react";
 import { Grid } from "theme-ui";
 
 import Tile from "../tile/Tile";
-import MapTileImage from "./MapTileImage";
+import MapImage from "./MapImage";
 
 import useResponsiveLayout from "../../hooks/useResponsiveLayout";
 
@@ -22,7 +22,7 @@ function MapTileGroup({ group, maps, isSelected, onSelect, onDoubleClick }) {
         sx={{ gridGap: 2 }}
       >
         {maps.slice(0, 9).map((map) => (
-          <MapTileImage
+          <MapImage
             sx={{ borderRadius: "8px" }}
             map={map}
             key={`${map.id}-group-tile`}