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) {
+    const imageEl = tile.imageSrc ? (
-      return (
+      <img
-        <div
+        src={tile.imageSrc}
-          className={clx("flex w-full h-full", tile.className)}
+        alt={tile.label ?? `category-${idx}`}
-          key={`tile-${idx}`}
+        className={clx(classes.image, tile.imageClassName)}
-        >
+      />
-          {tile.headingLabel && (
+    ) : (
-            <div className={clx(tile.headingClassName)}>{tile.headingLabel}</div>
+      <div
-          )}
+        className={clx(
-          {tile.descriptionLabel && (
+          "w-full h-full flex items-center justify-center",
-            <div className={tile.descriptionClassName}>
+          tile.className
-              {tile.descriptionLabel}
+        )}
-            </div>
+      >
-          )}
+        <div className={clx(tile.headingClassName)}>{tile.headingLabel}</div>
-          {tile.buttonLabel && (
+        <div className={tile.descriptionClassName}>{tile.descriptionLabel}</div>
-            <button className={tile.buttonClassName}>{tile.buttonLabel}</button>
+        <button className={tile.buttonClassName}>{tile.buttonLabel}</button>
-          )}
+      </div>
-        </div>
+    )
-      )
-    }
 
     const content = (
       <div className={clx("relative w-full h-full")}>
-        <img
+        {imageEl}
-          src={tile.imageSrc}
-          alt={tile.label ?? `category-${idx}`}
-          className={clx(classes.image, tile.imageClassName)}
-        />
         {tile.label && <span className={classes.label}>{tile.label}</span>}
       </div>
     )