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