refactor: clean up App component and reset to base layout without hotkeys and Tab

2026-07-22 20:48:04 +03:30
parent 77c8865155
commit 1623b686f2
2 changed files with 51 additions and 134 deletions
@@ -1,140 +1,11 @@
-import { useState, useEffect } from "react";
+import { MantineProvider } from "@mantine/core";
-import { MantineProvider, Tabs, Button } from "@mantine/core";
+import CmdkTestDemo from "./cmdkTestDemo";
 import {
  HotkeysProvider,
  useHotkeys,
  useHotkeysContext,
 } from "react-hotkeys-hook";
 import { Command } from "cmdk";
 import "@mantine/core/styles.css";
 function TabContent({ title, scopeName }: any) {
  const [text, setText] = useState(`${title} panel `);
  const [used, setUsed] = useState(false);
  useHotkeys(
    "ctrl+b",
    () => {
      if (used) return;
      setText((prev) => prev + `${title} `);
      setUsed(true);
    },
    {
      scopes: [scopeName],
      preventDefault: true,
    },
  );
  return <>{text}</>;
 }
 function TabsPage() {
  const { enableScope, disableScope } = useHotkeysContext();
  const [activeTab, setActiveTab] = useState("1");
  const [opened, setOpened] = useState(false);
  const actions = [
    { id: "1", label: "First", description: "First panel" },
    { id: "2", label: "Second", description: "Second panel" },
    { id: "3", label: "Third", description: "Third panel" },
  ];
  useEffect(() => {
    const currentScope = `tab${activeTab}`;
    enableScope(currentScope);
    return () => {
      disableScope(currentScope);
    };
  }, [activeTab, enableScope, disableScope]);
  useHotkeys("ctrl+1", () => setActiveTab("1"), { preventDefault: true });
  useHotkeys("ctrl+2", () => setActiveTab("2"), { preventDefault: true });
  useHotkeys("ctrl+3", () => setActiveTab("3"), { preventDefault: true });
  useHotkeys(
    "ctrl+k",
    (e) => {
      e.preventDefault();
      setOpened((prev) => !prev);
    },
    { enableOnFormTags: true },
  );
  const handleSelectTab = (tabId: string) => {
    setActiveTab(tabId);
    setOpened(false);
  };
  return (
    <>
      <Button onClick={() => setOpened(true)} variant="default" mb="md">
        Open Command Menu (Ctrl + K)
      </Button>
      <Command.Dialog
        open={opened}
        onOpenChange={() => setOpened(false)}
        label="Global Command Menu"
      >
        <Command.Input placeholder="Search Tab ..." autoFocus />
        <Command.List>
          <Command.Empty>No results found.</Command.Empty>
          <Command.Group>
            {actions.map((action) => (
              <Command.Item
                key={action.id}
                onSelect={() => handleSelectTab(action.id)}
                style={{
                  fontWeight: activeTab === action.id ? "bold" : "normal",
                }}
              >
                <div>
                  <div>{action.label}</div>
                  <small style={{ color: "var(--mantine-color-dimmed)" }}>
                    {action.description}
                  </small>
                </div>
              </Command.Item>
            ))}
          </Command.Group>
        </Command.List>
      </Command.Dialog>
      <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="2">
          <TabContent title="Second" scopeName="tab2" />
        </Tabs.Panel>
        <Tabs.Panel value="3">
          <TabContent title="Third" scopeName="tab3" />
        </Tabs.Panel>
      </Tabs>
    </>
  );
 }
 export default function App() {
  return (
    <HotkeysProvider initiallyActiveScopes={["tab1"]}>
    <MantineProvider>
-        <TabsPage />
+      <CmdkTestDemo />
    </MantineProvider>
    </HotkeysProvider>
  );
 }
@@ -0,0 +1,46 @@
 import { Button } from "@mantine/core";
 import { Command } from "cmdk";
 import { useState } from "react";
 export default function CmdkTestDemo() {
  const [opened, setOpened] = useState(false);
  const actions = [
    { id: "1", label: "First", description: "First panel" },
    { id: "2", label: "Second", description: "Second panel" },
    { id: "3", label: "Third", description: "Third panel" },
  ];
  return (
    <>
      <Button onClick={() => setOpened(true)} variant="default" mb="md">
        Open Command Menu (Ctrl + K)
      </Button>
      <Command.Dialog
        open={opened}
        onOpenChange={() => setOpened(false)}
        label="Global Command Menu"
      >
        <Command.Input placeholder="Search Tab ..." autoFocus />
        <Command.List>
          <Command.Empty>No results found.</Command.Empty>
          <Command.Group>
            {actions.map((action) => (
              <Command.Item key={action.id}>
                <div>
                  <div>{action.label}</div>
                  <small style={{ color: "var(--mantine-color-dimmed)" }}>
                    {action.description}
                  </small>
                </div>
              </Command.Item>
            ))}
          </Command.Group>
        </Command.List>
      </Command.Dialog>
    </>
  );
 }