feat(tabs): add individual hotkeys for each tab(Ctrl+1, Ctrl+2, Ctrl+3)

2026-06-20 13:12:03 +03:30
commit 43ab19eccf
15 changed files with 2256 additions and 0 deletions
@@ -0,0 +1,47 @@
+import { MantineProvider, Tabs } from "@mantine/core";
+import { useHotkeys } from "react-hotkeys-hook";
+import { useState } from "react";
+import "@mantine/core/styles.css";
+
+function App() {
+  const [activeTab, setActiveTab] = useState<string | null>("1");
+
+  useHotkeys(
+    "ctrl+1, ctrl+2, ctrl+3",
+    (event, handler) => {
+      const key = handler.keys?.[0];
+      if (key) {
+        setActiveTab(key);
+      }
+    },
+    { preventDefault: true, enableOnFormTags: true },
+  );
+
+  return (
+    <MantineProvider>
+      <Tabs value={activeTab} onChange={setActiveTab} color="teal">
+        <Tabs.List>
+          <Tabs.Tab value="1">First tab</Tabs.Tab>
+          <Tabs.Tab value="2" color="blue">
+            Second tab
+          </Tabs.Tab>
+          <Tabs.Tab value="3">Third tab</Tabs.Tab>
+        </Tabs.List>
+
+        <Tabs.Panel value="1" pt="xs">
+          First panel
+        </Tabs.Panel>
+
+        <Tabs.Panel value="2" pt="xs">
+          Second panel
+        </Tabs.Panel>
+
+        <Tabs.Panel value="3" pt="xs">
+          Third panel
+        </Tabs.Panel>
+      </Tabs>
+    </MantineProvider>
+  );
+}
+
+export default App;