@thead-vantage/react 2.24.0 → 2.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thead-vantage/react",
-  "version": "2.24.0",
+  "version": "2.25.0",
   "description": "React components and utilities for TheAd Vantage ad platform integration",
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/components/AdBanner.tsx

@@ -238,67 +238,79 @@ export function AdBanner({
 
   return (
     <div className={`relative ${className}`}>
+      <div className="relative">
+        <a
+          href={ad.targetUrl}
+          onClick={handleClick}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="block"
+        >
+          {(ad.type === 'image' || ad.type === 'standard') && ad.contentUrl ? (
+            <Image
+              src={ad.contentUrl}
+              alt={ad.name}
+              width={ad.width || 300}
+              height={ad.height || 250}
+              className="rounded-t"
+              unoptimized
+            />
+          ) : (
+            <div className="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-t" style={{ width: ad.width || 300, height: ad.height || 250 }}>
+              <span className="text-sm text-gray-500">Ad content</span>
+            </div>
+          )}
+        </a>
+        {showImpressionFinished && impressionStatus !== 'pending' && (
+          <div className="absolute top-2 right-2">
+            {impressionStatus === 'counting' ? (
+              <svg
+                className="w-5 h-5 text-gray-400 animate-spin"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                />
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                />
+              </svg>
+            ) : impressionStatus === 'completed' ? (
+              <svg
+                className="w-5 h-5 text-green-500"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            ) : null}
+          </div>
+        )}
+      </div>
+      {/* TheAd Vantage branding bar */}
       <a
-        href={ad.targetUrl}
-        onClick={handleClick}
+        href="https://www.thead-vantage.com"
         target="_blank"
         rel="noopener noreferrer"
-        className="block"
+        className="block bg-black text-yellow-400 hover:text-yellow-300 text-xs font-medium py-1.5 px-2 text-center rounded-b transition-colors"
+        style={{ width: ad.width || 300 }}
       >
-        {(ad.type === 'image' || ad.type === 'standard') && ad.contentUrl ? (
-          <Image
-            src={ad.contentUrl}
-            alt={ad.name}
-            width={ad.width || 300}
-            height={ad.height || 250}
-            className="rounded"
-            unoptimized
-          />
-        ) : (
-          <div className="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded" style={{ width: ad.width || 300, height: ad.height || 250 }}>
-            <span className="text-sm text-gray-500">Ad content</span>
-          </div>
-        )}
+        Advertise with thead-vantage.com
       </a>
-      {showImpressionFinished && impressionStatus !== 'pending' && (
-        <div className="absolute top-2 right-2">
-          {impressionStatus === 'counting' ? (
-            <svg
-              className="w-5 h-5 text-gray-400 animate-spin"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <circle
-                className="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                strokeWidth="4"
-              />
-              <path
-                className="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-              />
-            </svg>
-          ) : impressionStatus === 'completed' ? (
-            <svg
-              className="w-5 h-5 text-green-500"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-            >
-              <path
-                fillRule="evenodd"
-                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                clipRule="evenodd"
-              />
-            </svg>
-          ) : null}
-        </div>
-      )}
       {devMode && (
         <p className="text-xs text-gray-500 mt-1">[DEV] No tracking active</p>
       )}