diff --git a/src/components/Examples/ExamplesContent.tsx b/src/components/Examples/ExamplesContent.tsx
index 4bec9ab3c7..d066784dfc 100644
--- a/src/components/Examples/ExamplesContent.tsx
+++ b/src/components/Examples/ExamplesContent.tsx
@@ -76,7 +76,7 @@ const ExamplesContent = ({ exampleImages }: { exampleImages: ImageProps[] }) =>
{filteredExamples.length > 0 ? (
-
+
) : (
)}
diff --git a/src/components/Examples/ExamplesGrid.tsx b/src/components/Examples/ExamplesGrid.tsx
index 7184815e4a..2086a6b3b6 100644
--- a/src/components/Examples/ExamplesGrid.tsx
+++ b/src/components/Examples/ExamplesGrid.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
import Badge from '@ably/ui/core/Badge';
import Icon from '@ably/ui/core/Icon';
import { IconName } from '@ably/ui/core/Icon/types';
@@ -7,7 +7,15 @@ import cn from '@ably/ui/core/utils/cn';
import { Image, ImageProps } from '../Image';
import examplesData, { Example } from '../../data/examples';
-const ExamplesGrid = ({ examples, exampleImages }: { examples: Example[]; exampleImages: ImageProps[] }) => {
+const ExamplesGrid = ({
+ examples,
+ exampleImages,
+ searchTerm,
+}: {
+ examples: Example[];
+ exampleImages: ImageProps[];
+ searchTerm: string;
+}) => {
const displayExampleImage = (exampleImages: ImageProps[], selectedImage: string, productName: string) => {
const productImage = exampleImages.find((image) => image.name === selectedImage);
return productImage ?
: null;
@@ -44,6 +52,8 @@ const ExamplesGrid = ({ examples, exampleImages }: { examples: Example[]; exampl
) : null;
+ const searchRegex = useMemo(() => new RegExp(`(${searchTerm})`, 'gi'), [searchTerm]);
+
return (
{examples
@@ -60,7 +70,17 @@ const ExamplesGrid = ({ examples, exampleImages }: { examples: Example[]; exampl
{name}
- {description}
+
+ {description.split(searchRegex).map((part, index) =>
+ part.toLowerCase() === searchTerm.toLowerCase() ? (
+
+ {part}
+
+ ) : (
+ part
+ ),
+ )}
+
{products ? products.map((product) => displayProductLabel(product as ProductName, dataProducts)) : null}
{useCases ? useCases.map((useCase) => displayUseCaseLabel(useCase, examplesData.useCases)) : null}
diff --git a/src/components/Examples/filter-search-examples.ts b/src/components/Examples/filter-search-examples.ts
index bb8700eb29..00d44b1d77 100644
--- a/src/components/Examples/filter-search-examples.ts
+++ b/src/components/Examples/filter-search-examples.ts
@@ -15,6 +15,7 @@ export const filterSearchExamples = (
(selectedUseCases.length === 0 || example.useCases.some((useCase) => selectedUseCases.includes(useCase))) &&
(searchTerm === '' ||
example.name.toLowerCase().includes(normalizedSearchTerm) ||
+ example.description.toLowerCase().includes(normalizedSearchTerm) ||
example.products.some((product) => product.toLowerCase().includes(normalizedSearchTerm)) ||
example.useCases.some((useCase) => useCase.toLowerCase().includes(normalizedSearchTerm))),
);