chore(two-columns-layout-example): add faq plugin

examples/two-columns-layout/src/app.tsx

@@ -4,6 +4,7 @@ import { h, render } from 'preact';
 
 import { brandsPlugin } from './plugins/brandsPlugin';
 import { categoriesPlugin } from './plugins/categoriesPlugin';
+import { faqPlugin } from './plugins/faqPlugin';
 import { productsPlugin } from './plugins/productsPlugin';
 import { querySuggestionsPlugin } from './plugins/querySuggestionsPlugin';
 import { recentSearchesPlugin } from './plugins/recentSearchesPlugin';
@@ -21,6 +22,7 @@ autocomplete({
     querySuggestionsPlugin,
     categoriesPlugin,
     brandsPlugin,
+    faqPlugin,
     productsPlugin,
   ],
   render({ elements }, root) {
@@ -29,6 +31,7 @@ autocomplete({
       querySuggestionsPlugin: querySuggestions,
       categoriesPlugin: categories,
       brandsPlugin: brands,
+      faqPlugin: faq,
       productsPlugin: products,
     } = elements;
 
@@ -46,6 +49,7 @@ autocomplete({
             {querySuggestions}
             {categories}
             {brands}
+            {faq}
           </div>
           <div className="aa-PanelSection--right">{productsSection}</div>
         </div>

examples/two-columns-layout/src/plugins/faqPlugin.tsx

@@ -0,0 +1,77 @@
+/** @jsx h */
+import {
+  AutocompleteComponents,
+  AutocompletePlugin,
+  getAlgoliaResults,
+} from '@algolia/autocomplete-js';
+import { h } from 'preact';
+
+import { Breadcrumb } from '../components/Breadcrumb';
+import { ALGOLIA_FAQ_INDEX_NAME } from '../constants';
+import { searchClient } from '../searchClient';
+import { FaqHit } from '../types';
+
+export const faqPlugin: AutocompletePlugin<FaqHit, {}> = {
+  getSources({ query }) {
+    if (!query) {
+      return [];
+    }
+
+    return [
+      {
+        sourceId: 'faqPlugin',
+        getItems() {
+          return getAlgoliaResults<FaqHit>({
+            searchClient,
+            queries: [
+              {
+                indexName: ALGOLIA_FAQ_INDEX_NAME,
+                query,
+                params: {
+                  hitsPerPage: 1,
+                },
+              },
+            ],
+          });
+        },
+        templates: {
+          item({ item, components }) {
+            return <FaqItem hit={item} components={components} />;
+          },
+        },
+      },
+    ];
+  },
+};
+
+type FaqItemProps = {
+  hit: FaqHit;
+  components: AutocompleteComponents;
+};
+
+const FaqItem = ({ hit, components }: FaqItemProps) => {
+  const breadcrumbItems = hit.list_categories;
+
+  return (
+    <div className="aa-ItemWrapper aa-FaqItem">
+      <div className="aa-ItemContent">
+        <div className="aa-ItemIcon aa-ItemIcon--noBorder">
+          <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+        </div>
+        <div className="aa-ItemContentBody">
+          <div className="aa-ItemContentTitle">
+            <components.ReverseHighlight hit={hit} attribute="title" />
+          </div>
+        </div>
+      </div>
+      <Breadcrumb items={breadcrumbItems} />
+    </div>
+  );
+};

examples/two-columns-layout/src/types/FaqHit.ts

@@ -0,0 +1,9 @@
+import { Hit } from '@algolia/client-search';
+
+type FaqRecord = {
+  list_categories: string[];
+  title: string;
+  description: string;
+};
+
+export type FaqHit = Hit<FaqRecord>;

examples/two-columns-layout/src/types/index.ts

@@ -1,3 +1,4 @@
 export * from './ProductHit';
 export * from './CategoryHit';
 export * from './BrandHit';
+export * from './FaqHit';

examples/two-columns-layout/style.css

@@ -78,15 +78,17 @@ body {
   transform-origin: center bottom;
 }
 
-/* Category */
-.aa-ItemWrapper.aa-CategoryItem {
+/* Category and faq */
+.aa-ItemWrapper.aa-CategoryItem,
+.aa-ItemWrapper.aa-FaqItem {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0;
 }
 
-.aa-CategoryItem .aa-Breadcrumb {
+.aa-CategoryItem .aa-Breadcrumb,
+.aa-FaqItem .aa-Breadcrumb {
   margin-left: calc(var(--aa-icon-size) + var(--aa-spacing));
 }