Refactored map tile and added badges option

src/components/Tile.js

@@ -0,0 +1,122 @@
+import React from "react";
+import { Flex, Image as UIImage, IconButton, Box, Text, Badge } from "theme-ui";
+
+import EditTileIcon from "../icons/EditTileIcon";
+
+function Tile({
+  src,
+  title,
+  isSelected,
+  onSelect,
+  onEdit,
+  onDoubleClick,
+  large,
+  canEdit,
+  badges,
+  editTitle,
+}) {
+  return (
+    <Flex
+      sx={{
+        position: "relative",
+        width: large ? "48%" : "32%",
+        height: "0",
+        paddingTop: large ? "48%" : "32%",
+        borderRadius: "4px",
+        justifyContent: "center",
+        alignItems: "center",
+        cursor: "pointer",
+        overflow: "hidden",
+        userSelect: "none",
+      }}
+      my={1}
+      mx={`${large ? 1 : 2 / 3}%`}
+      bg="muted"
+      onClick={(e) => {
+        e.stopPropagation();
+        onSelect();
+      }}
+      onDoubleClick={(e) => {
+        if (canEdit) {
+          onDoubleClick(e);
+        }
+      }}
+    >
+      <UIImage
+        sx={{
+          width: "100%",
+          height: "100%",
+          objectFit: "contain",
+          position: "absolute",
+          top: 0,
+          left: 0,
+        }}
+        src={src}
+      />
+      <Flex
+        sx={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background:
+            "linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.65) 100%);",
+          alignItems: "flex-end",
+          justifyContent: "center",
+        }}
+        p={2}
+      >
+        <Text
+          as="p"
+          variant="heading"
+          color="hsl(210, 50%, 96%)"
+          sx={{ textAlign: "center" }}
+        >
+          {title}
+        </Text>
+      </Flex>
+      <Box
+        sx={{
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          borderColor: "primary",
+          borderStyle: isSelected ? "solid" : "none",
+          borderWidth: "4px",
+          pointerEvents: "none",
+          borderRadius: "4px",
+        }}
+      />
+      <Box sx={{ position: "absolute", top: 0, left: 0 }}>
+        {badges.map((badge, i) => (
+          <Badge m={2} key={i} bg="overlay">
+            {badge}
+          </Badge>
+        ))}
+      </Box>
+      {canEdit && (
+        <Box sx={{ position: "absolute", top: 0, right: 0 }}>
+          <IconButton
+            aria-label={editTitle}
+            title={editTitle}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onEdit();
+            }}
+            bg="overlay"
+            sx={{ borderRadius: "50%" }}
+            m={2}
+          >
+            <EditTileIcon />
+          </IconButton>
+        </Box>
+      )}
+    </Flex>
+  );
+}
+
+export default Tile;

src/components/map/MapTile.js

@@ -1,7 +1,6 @@
 import React from "react";
-import { Flex, Image as UIImage, IconButton, Box, Text } from "theme-ui";
 
-import EditMapIcon from "../../icons/EditMapIcon";
+import Tile from "../Tile";
 
 import useDataSource from "../../helpers/useDataSource";
 import { mapSources as defaultMapSources, unknownSource } from "../../maps";
@@ -14,6 +13,7 @@ function MapTile({
   onDone,
   large,
   canEdit,
+  badges,
 }) {
   const isDefault = map.type === "default";
   const mapSource = useDataSource(
@@ -27,100 +27,17 @@ function MapTile({
   );
 
   return (
-    <Flex
+    <Tile
-      key={map.id}
+      src={mapSource}
-      sx={{
+      title={map.name}
-        position: "relative",
+      isSelected={isSelected}
-        width: large ? "48%" : "32%",
+      onSelect={() => onMapSelect(map)}
-        height: "0",
+      onEdit={() => onMapEdit(map.id)}
-        paddingTop: large ? "48%" : "32%",
+      onDoubleClick={onDone}
-        borderRadius: "4px",
+      large={large}
-        justifyContent: "center",
+      canEdit={canEdit}
-        alignItems: "center",
+      badges={badges}
-        cursor: "pointer",
+    />
-        overflow: "hidden",
-        userSelect: "none",
-      }}
-      my={1}
-      mx={`${large ? 1 : 2 / 3}%`}
-      bg="muted"
-      onClick={(e) => {
-        e.stopPropagation();
-        onMapSelect(map);
-      }}
-      onDoubleClick={(e) => {
-        if (canEdit) {
-          onDone(e);
-        }
-      }}
-    >
-      <UIImage
-        sx={{
-          width: "100%",
-          height: "100%",
-          objectFit: "contain",
-          position: "absolute",
-          top: 0,
-          left: 0,
-        }}
-        src={mapSource}
-      />
-      <Flex
-        sx={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          background:
-            "linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.65) 100%);",
-          alignItems: "flex-end",
-          justifyContent: "center",
-        }}
-        p={2}
-      >
-        <Text
-          as="p"
-          variant="heading"
-          color="hsl(210, 50%, 96%)"
-          sx={{ textAlign: "center" }}
-        >
-          {map.name}
-        </Text>
-      </Flex>
-      <Box
-        sx={{
-          width: "100%",
-          height: "100%",
-          position: "absolute",
-          top: 0,
-          left: 0,
-          borderColor: "primary",
-          borderStyle: isSelected ? "solid" : "none",
-          borderWidth: "4px",
-          pointerEvents: "none",
-          borderRadius: "4px",
-        }}
-      />
-      {canEdit && (
-        <Box sx={{ position: "absolute", top: 0, right: 0 }}>
-          <IconButton
-            aria-label="Edit Map"
-            title="Edit Map"
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              onMapEdit(map.id);
-            }}
-            bg="overlay"
-            sx={{ borderRadius: "50%" }}
-            m={2}
-          >
-            <EditMapIcon />
-          </IconButton>
-        </Box>
-      )}
-    </Flex>
   );
 }
 

src/components/map/MapTiles.js

@@ -73,6 +73,7 @@ function MapTiles({
         canEdit={
           isSelected && selectMode === "single" && selectedMaps.length === 1
         }
+        badges={[`${map.gridX}x${map.gridY}`]}
       />
     );
   }

src/icons/EditTileIcon.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-function EditMapIcon() {
+function EditTileIcon() {
   return (
     <svg
       width="24"
@@ -15,4 +15,4 @@ function EditMapIcon() {
   );
 }
 
-export default EditMapIcon;
+export default EditTileIcon;