src/modules/home/components/vt-category-highlight/index.tsx

@@ -34,34 +34,28 @@ export default async function VtCategoryHighlight({
   }
 
   const renderTile = (tile: any, idx: number) => {
-    if (!tile.imageSrc) {
-      return (
-        <div
-          className={clx("flex w-full h-full", tile.className)}
-          key={`tile-${idx}`}
-        >
-          {tile.headingLabel && (
-            <div className={clx(tile.headingClassName)}>{tile.headingLabel}</div>
-          )}
-          {tile.descriptionLabel && (
-            <div className={tile.descriptionClassName}>
-              {tile.descriptionLabel}
-            </div>
-          )}
-          {tile.buttonLabel && (
-            <button className={tile.buttonClassName}>{tile.buttonLabel}</button>
-          )}
-        </div>
-      )
-    }
-
-    const content = (
-      <div className={clx("relative w-full h-full")}>
+    const imageEl = tile.imageSrc ? (
       <img
         src={tile.imageSrc}
         alt={tile.label ?? `category-${idx}`}
         className={clx(classes.image, tile.imageClassName)}
       />
+    ) : (
+      <div
+        className={clx(
+          "w-full h-full flex items-center justify-center",
+          tile.className
+        )}
+      >
+        <div className={clx(tile.headingClassName)}>{tile.headingLabel}</div>
+        <div className={tile.descriptionClassName}>{tile.descriptionLabel}</div>
+        <button className={tile.buttonClassName}>{tile.buttonLabel}</button>
+      </div>
+    )
+
+    const content = (
+      <div className={clx("relative w-full h-full")}>
+        {imageEl}
         {tile.label && <span className={classes.label}>{tile.label}</span>}
       </div>
     )