From afef8a293ebc5ead21f1107b3d455a095aa14dc8 Mon Sep 17 00:00:00 2001
From: Mark Hulbert <39801222+m-hulbert@users.noreply.github.com>
Date: Thu, 23 Jul 2026 12:22:53 +0100
Subject: [PATCH] fix(examples): render product badges via the examples product
 map

ExamplesGrid drew badge labels from the homepage ProductTile map, whose
keys (aiTransport, liveObjects) don't match the example product keys, so
AI Transport and LiveObjects cards rendered no badge. Use the examples
domain's own products map instead, consistent with ExamplesFilter and
ExamplesContent.

Rename the 'auth' filter to 'platform' (label "Platform") with its own
badge colour, and order the product filters platform, pubsub, chat, AI
Transport, spaces, LiveObjects.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/Examples/ExamplesGrid.tsx     | 17 ++++++++---------
 src/components/Examples/ExamplesRenderer.tsx |  2 +-
 src/data/examples/index.ts                   | 16 ++++++++--------
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/components/Examples/ExamplesGrid.tsx b/src/components/Examples/ExamplesGrid.tsx
index a7b46c3f7f..7ecaafd7d2 100644
--- a/src/components/Examples/ExamplesGrid.tsx
+++ b/src/components/Examples/ExamplesGrid.tsx
@@ -2,10 +2,9 @@ import React, { useCallback } from 'react';
 import Badge from 'src/components/ui/Badge';
 import Icon from 'src/components/Icon';
 import { IconName } from 'src/components/Icon/types';
-import { ProductName, products as dataProducts } from 'src/components/ui/ProductTile/data';
 import cn from 'src/utilities/cn';
 import { Image, ImageProps } from '../Image';
-import { DEFAULT_EXAMPLE_LANGUAGES } from '../../data/examples/';
+import { DEFAULT_EXAMPLE_LANGUAGES, products as dataProducts } from '../../data/examples/';
 import { Example } from '../../data/examples/types';
 
 const ExamplesGrid = ({
@@ -22,17 +21,17 @@ const ExamplesGrid = ({
     return productImage ? <Image image={productImage} alt={name} className="h-full" /> : null;
   }, []);
 
-  const badgeColorForProduct = useCallback((product: ProductName) => {
+  const badgeColorForProduct = useCallback((product: string) => {
     switch (product) {
+      case 'platform':
+        return 'text-slate-600';
       case 'chat':
         return 'text-violet-400';
       case 'spaces':
         return 'text-pink-500';
-      case 'liveSync':
-        return 'text-blue-600';
-      case 'liveObjects':
+      case 'liveobjects':
         return 'text-green-600';
-      case 'aiTransport':
+      case 'ai_transport':
         return 'text-cyan-500';
       default:
         return 'text-orange-700';
@@ -40,7 +39,7 @@ const ExamplesGrid = ({
   }, []);
 
   const displayProductLabel = useCallback(
-    (product: ProductName, dataProducts: { [key: string]: { label: string } }) =>
+    (product: string, dataProducts: { [key: string]: { label: string } }) =>
       dataProducts[product] ? (
         <Badge key={product} className={cn('uppercase', badgeColorForProduct(product))}>
           {dataProducts[product].label}
@@ -100,7 +99,7 @@ const ExamplesGrid = ({
             <p className="ui-text-h4 text-neutral-1300 dark:text-neutral-000">{highlightSearchTerm(name)}</p>
             <p className="ui-text-p3 mt-2 text-neutral-900 dark:text-neutral-500">{highlightSearchTerm(description)}</p>
             <div className="mt-4 flex gap-x-1">
-              {products ? products.map((product) => displayProductLabel(product as ProductName, dataProducts)) : null}
+              {products ? products.map((product) => displayProductLabel(product, dataProducts)) : null}
               {/* {useCases ? useCases.map((useCase) => displayUseCaseLabel(useCase)) : null} */}
             </div>
           </div>
diff --git a/src/components/Examples/ExamplesRenderer.tsx b/src/components/Examples/ExamplesRenderer.tsx
index 5bcf2bcaaf..d506217a38 100644
--- a/src/components/Examples/ExamplesRenderer.tsx
+++ b/src/components/Examples/ExamplesRenderer.tsx
@@ -48,7 +48,7 @@ const getDependencies = (id: string, products: string[], activeLanguage: Languag
     nanoid: '^5.0.7',
     minifaker: '1.34.1',
     'franken-ui': '^2.0.0',
-    ...(products.includes('auth') ? { cors: '^2.8.5' } : {}),
+    ...(products.includes('platform') ? { cors: '^2.8.5' } : {}),
     ...(products.includes('chat')
       ? { '@ably/chat': '~1.3.1', '@ably/chat-react-ui-kit': '~0.3.0', clsx: '^2.1.1' }
       : {}),
diff --git a/src/data/examples/index.ts b/src/data/examples/index.ts
index 5d3c246ff4..9aafdd5f2d 100644
--- a/src/data/examples/index.ts
+++ b/src/data/examples/index.ts
@@ -17,7 +17,7 @@ export const examples: Example[] = [
     id: 'auth-generate-jwt',
     name: 'Generate JWT',
     description: 'Generate a JSON Web Token (JWT) for authenticating users.',
-    products: ['auth'],
+    products: ['platform'],
     layout: 'single-horizontal',
     visibleFiles: ['src/script.ts', 'App.tsx', 'index.tsx'],
     metaTitle: `Authenticate with Ably using JWTs`,
@@ -27,7 +27,7 @@ export const examples: Example[] = [
     id: 'auth-request-token',
     name: 'Request an Ably Token',
     description: 'Request an Ably Token for authenticating users. JWTs are recommended for most use cases.',
-    products: ['auth'],
+    products: ['platform'],
     layout: 'single-horizontal',
     visibleFiles: ['src/script.ts', 'App.tsx', 'index.tsx'],
     metaTitle: `Authenticate with Ably Token`,
@@ -342,8 +342,8 @@ export const examples: Example[] = [
 ];
 
 export const products = {
-  auth: {
-    label: 'Authentication',
+  platform: {
+    label: 'Platform',
   },
   pubsub: {
     label: 'Pub/Sub',
@@ -351,14 +351,14 @@ export const products = {
   chat: {
     label: 'Chat',
   },
-  liveobjects: {
-    label: 'LiveObjects',
+  ai_transport: {
+    label: 'AI Transport',
   },
   spaces: {
     label: 'Spaces',
   },
-  ai_transport: {
-    label: 'AI Transport',
+  liveobjects: {
+    label: 'LiveObjects',
   },
 };