fea(panel) :add hotkey for add word in panel (ctrl+b)

src/App.tsx

@@ -5,6 +5,50 @@ import "@mantine/core/styles.css";
 
 function App() {
   const [activeTab, setActiveTab] = useState<string | null>("1");
+  const [panelTexts, setPanelTexts] = useState<Record<string, string>>({
+    "1": "First panel ",
+    "2": "Second panel ",
+    "3": "Third panel ",
+  });
+
+  const tt: Record<string, string> = {
+    "1": "First ",
+    "2": "Second ",
+    "3": "Third ",
+  };
+
+  const [hotkeyEnabled, setHotkeyEnabled] = useState<Record<string, boolean>>({
+    "1": true,
+    "2": true,
+    "3": true,
+  });
+  useHotkeys(
+    "ctrl+b",
+    () => {
+      if (!activeTab) return;
+      const textToAppend = tt[activeTab];
+      if (textToAppend) {
+        setPanelTexts((prev) => {
+          return {
+            ...prev,
+            [activeTab]: prev[activeTab] + textToAppend,
+          };
+        });
+
+        setHotkeyEnabled((prev) => ({
+          ...prev,
+          [activeTab]: false,
+        }));
+      }
+    },
+
+    {
+      preventDefault: true,
+      enableOnFormTags: true,
+      enabled: activeTab ? hotkeyEnabled[activeTab] : false,
+    },
+    [activeTab, hotkeyEnabled],
+  );
 
   useHotkeys(
     "ctrl+1, ctrl+2, ctrl+3",
@@ -29,15 +73,13 @@ function App() {
         </Tabs.List>
 
         <Tabs.Panel value="1" pt="xs">
-          First panel
+          {panelTexts["1"]}
         </Tabs.Panel>
-
         <Tabs.Panel value="2" pt="xs">
-          Second panel
+          {panelTexts["2"]}
         </Tabs.Panel>
-
         <Tabs.Panel value="3" pt="xs">
-          Third panel
+          {panelTexts["3"]}
         </Tabs.Panel>
       </Tabs>
     </MantineProvider>