DOC-12439: Added TabBar to the Example

src/App.tsx

@@ -10,6 +10,8 @@ import { loadSearchAnalyticsActions, loadSearchActions } from "@coveo/headless";
 import headlessEngine from "./Engine";
 import Sort from "./Components/Sort";
 import { Box, Container, Grid, Typography } from "@mui/material";
+import Tab from "./Components/Tab/Tab";
+import { intelProps, AMD_Props, anyProps } from "./TabProps";
 
 export default class App extends React.Component {
   componentDidMount() {
@@ -33,14 +35,26 @@ export default class App extends React.Component {
             Coveo Headless + Material UI
           </Typography>
         </Box>
-
+        <div className="tabBar-container">
+          <Tab
+            initialState={anyProps.initialState!}
+            options={anyProps.options!}
+          />
+          <Tab
+            initialState={intelProps.initialState!}
+            options={intelProps.options!}
+          />
+          <Tab
+            initialState={AMD_Props.initialState!}
+            options={AMD_Props.options!}
+          />
+        </div>
         <SearchBox />
         <Box my={1}>
           <FacetBreadcrumbs />
           <Grid container>
             <Grid item xs={4}>
               <Facet title="Brand" field="ec_brand" />
-              <Facet title="Frequencies" field="eng_frequencies" />
               <Facet title="Processor" field="eng_processor" />
               <Facet title="Store name" field="store_name" />
             </Grid>

src/Components/Facet.tsx

@@ -34,7 +34,7 @@ export default class Facet extends React.Component<IFacetProps, {}> {
 
     this.headlessFacet = buildFacet(headlessEngine, {
       options: {
-        numberOfValues: 5,
+        numberOfValues: 3,
         field: this.props.field,
       },
     });

src/Components/Tab/Tab.css

@@ -0,0 +1,16 @@
+ .tabBar {
+    height: 40px;
+    width: 100px;
+    background-color: white;
+    font-size: large;
+    margin: 0 10px 10px 0;
+    border-radius: 8px;
+}
+
+.tabBar:hover {
+    cursor: pointer;
+}
+
+.tabBar:disabled {
+    cursor: default;
+}

src/Components/Tab/Tab.tsx

@@ -0,0 +1,34 @@
+import headlessEngine from "../../Engine";
+import { buildTab, TabProps, Tab as HeadlessTab } from "@coveo/headless";
+import React from "react";
+import "./Tab.css";
+export default class Tab extends React.Component<TabProps> {
+  private headlessTab: HeadlessTab;
+  constructor(props: any) {
+    super(props);
+    this.headlessTab = buildTab(headlessEngine, props);
+    this.state = this.headlessTab.state;
+  }
+
+  componentDidMount() {
+    this.headlessTab.subscribe(() => this.updateState());
+  }
+
+  updateState() {
+    this.setState(this.headlessTab.state);
+  }
+
+  render() {
+    return (
+      <button
+        className="tabBar"
+        disabled={this.headlessTab.state.isActive}
+        onClick={() => {
+          this.headlessTab.select();
+        }}
+      >
+        {this.props.options.id}
+      </button>
+    );
+  }
+}

src/TabProps.tsx

@@ -0,0 +1,55 @@
+import { buildQueryExpression, TabOptions, TabProps } from "@coveo/headless";
+
+const filterIntelProcessor = buildQueryExpression()
+  .addStringField({
+    field: "eng_processor",
+    operator: "contains",
+    values: ["Intel"],
+  })
+  .toQuerySyntax();
+
+const filterAMDProcessor = buildQueryExpression()
+  .addStringField({
+    field: "eng_processor",
+    operator: "contains",
+    values: ["AMD"],
+  })
+  .toQuerySyntax();
+
+const noFilter = buildQueryExpression()
+  .addStringField({
+    field: "store_name",
+    operator: "contains",
+    values: ["Barca"],
+  })
+  .toQuerySyntax();
+
+const intelOptions: TabOptions = {
+  id: "Intel",
+  expression: filterIntelProcessor,
+};
+
+const AMD_Options: TabOptions = {
+  id: "AMD",
+  expression: filterAMDProcessor,
+};
+
+const anyOptions: TabOptions = {
+  id: "Any",
+  expression: noFilter,
+};
+
+export const intelProps: TabProps = {
+  initialState: { isActive: false },
+  options: intelOptions,
+};
+
+export const AMD_Props: TabProps = {
+  initialState: { isActive: false },
+  options: AMD_Options,
+};
+
+export const anyProps: TabProps = {
+  initialState: { isActive: true },
+  options: anyOptions,
+};