feat(spotlight): implement tab navigation via spotlight search

src/App.tsx

@@ -1,12 +1,14 @@
 import { useState, useEffect } from "react";
-import { MantineProvider, Tabs } from "@mantine/core";
+import { MantineProvider, Tabs, Button } from "@mantine/core";
 import {
   HotkeysProvider,
   useHotkeys,
   useHotkeysContext,
 } from "react-hotkeys-hook";
 import "@mantine/core/styles.css";
-
+import { Spotlight, spotlight } from "@mantine/spotlight";
+import type { SpotlightActionData } from "@mantine/spotlight";
+import "@mantine/spotlight/styles.css";
 function TabContent({ title, scopeName }: any) {
   const [text, setText] = useState(`${title} panel `);
   const [used, setUsed] = useState(false);
@@ -30,6 +32,32 @@ function TabContent({ title, scopeName }: any) {
 function TabsPage() {
   const { enableScope, disableScope } = useHotkeysContext();
   const [activeTab, setActiveTab] = useState("1");
+  const actions: SpotlightActionData[] = [
+    {
+      id: "first",
+      label: "First",
+      description: "First panel",
+      onClick: () => {
+        setActiveTab("1");
+      },
+    },
+    {
+      id: "second",
+      label: "Second",
+      description: "Second panel",
+      onClick: () => {
+        setActiveTab("2");
+      },
+    },
+    {
+      id: "third",
+      label: "Third",
+      description: "Third panel",
+      onClick: () => {
+        setActiveTab("3");
+      },
+    },
+  ];
 
   useEffect(() => {
     const currentScope = `tab${activeTab}`;
@@ -45,25 +73,41 @@ function TabsPage() {
   useHotkeys("ctrl+3", () => setActiveTab("3"), { preventDefault: true });
 
   return (
-    <Tabs value={activeTab} onChange={(value) => value && setActiveTab(value)}>
-      <Tabs.List>
-        <Tabs.Tab value="1">First</Tabs.Tab>
-        <Tabs.Tab value="2">Second</Tabs.Tab>
-        <Tabs.Tab value="3">Third</Tabs.Tab>
-      </Tabs.List>
+    <>
+      <Button onClick={spotlight.open} variant="default">
+        Open spotlight
+      </Button>
+      <Spotlight
+        actions={actions}
+        nothingFound="Nothing found..."
+        highlightQuery
+        searchProps={{
+          placeholder: "Search...",
+        }}
+      />
+      <Tabs
+        value={activeTab}
+        onChange={(value) => value && setActiveTab(value)}
+      >
+        <Tabs.List>
+          <Tabs.Tab value="1">First</Tabs.Tab>
+          <Tabs.Tab value="2">Second</Tabs.Tab>
+          <Tabs.Tab value="3">Third</Tabs.Tab>
+        </Tabs.List>
 
-      <Tabs.Panel value="1">
-        <TabContent title="First" scopeName="tab1" />
-      </Tabs.Panel>
+        <Tabs.Panel value="1">
+          <TabContent title="First" scopeName="tab1" />
+        </Tabs.Panel>
 
-      <Tabs.Panel value="2">
-        <TabContent title="Second" scopeName="tab2" />
-      </Tabs.Panel>
+        <Tabs.Panel value="2">
+          <TabContent title="Second" scopeName="tab2" />
+        </Tabs.Panel>
 
-      <Tabs.Panel value="3">
-        <TabContent title="Third" scopeName="tab3" />
-      </Tabs.Panel>
-    </Tabs>
+        <Tabs.Panel value="3">
+          <TabContent title="Third" scopeName="tab3" />
+        </Tabs.Panel>
+      </Tabs>
+    </>
   );
 }