From 060f478e23077e9cd4d391a570b9ad0ba4469c99 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Fri, 10 Jan 2025 11:22:43 +0000
Subject: [PATCH] feat: add description filtering and highlighting

---
 src/components/Examples/ExamplesContent.tsx   |  2 +-
 src/components/Examples/ExamplesGrid.tsx      | 26 ++++++++++++++++---
 .../Examples/filter-search-examples.ts        |  1 +
 3 files changed, 25 insertions(+), 4 deletions(-)

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[] }) =>
           </div>
           <div className="w-full sm:w-[80%] mt-40 sm:mt-0">
             {filteredExamples.length > 0 ? (
-              <ExamplesGrid exampleImages={exampleImages} examples={filteredExamples} />
+              <ExamplesGrid exampleImages={exampleImages} examples={filteredExamples} searchTerm={searchTerm} />
             ) : (
               <ExamplesNoResults />
             )}
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 ? <Image image={productImage} alt={productName} /> : null;
@@ -44,6 +52,8 @@ const ExamplesGrid = ({ examples, exampleImages }: { examples: Example[]; exampl
       </Badge>
     ) : null;
 
+  const searchRegex = useMemo(() => new RegExp(`(${searchTerm})`, 'gi'), [searchTerm]);
+
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-20 gap-y-32">
       {examples
@@ -60,7 +70,17 @@ const ExamplesGrid = ({ examples, exampleImages }: { examples: Example[]; exampl
                 </div>
               </div>
               <p className="ui-text-h4 mt-16 text-neutral-1300">{name}</p>
-              <p className="ui-text-p3 mt-8 text-neutral-900">{description}</p>
+              <p className="ui-text-p3 mt-8 text-neutral-900">
+                {description.split(searchRegex).map((part, index) =>
+                  part.toLowerCase() === searchTerm.toLowerCase() ? (
+                    <span key={index} className="bg-yellow-200">
+                      {part}
+                    </span>
+                  ) : (
+                    part
+                  ),
+                )}
+              </p>
               <div className="mt-16 flex gap-x-4">
                 {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))),
   );