feat: add description filtering and highlighting

ably · Jan 10, 2025 · 060f478 · 060f478
1 parent f014fa6
commit 060f478
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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))),
   );