fix: resolve issue #29 - Homepage: Implement Highlight section (3Bear, drSquatch)

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

@@ -34,28 +34,34 @@ export default async function VtCategoryHighlight({
   }
 
   const renderTile = (tile: any, idx: number) => {
-    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>
-    )
+    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")}>
-        {imageEl}
+        <img
+          src={tile.imageSrc}
+          alt={tile.label ?? `category-${idx}`}
+          className={clx(classes.image, tile.imageClassName)}
+        />
         {tile.label && <span className={classes.label}>{tile.label}</span>}
       </div>
     )