Refactored map tile and added badges option

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
-      key={map.id}
-      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();
-        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>
+    <Tile
+      src={mapSource}
+      title={map.name}
+      isSelected={isSelected}
+      onSelect={() => onMapSelect(map)}
+      onEdit={() => onMapEdit(map.id)}
+      onDoubleClick={onDone}
+      large={large}
+      canEdit={canEdit}
+      badges={badges}
+    />
   );
 }