refactor: clean up App component and reset to base layout

src/App.tsx

@@ -1,122 +1,8 @@
-import { useState, useEffect } from "react";
+import { MantineProvider } 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);
-
-  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 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}`;
-    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 });
-
-  return (
-    <>
-      <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="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 (
+  return <MantineProvider></MantineProvider>;
-    <HotkeysProvider initiallyActiveScopes={["tab1"]}>
-      <MantineProvider>
-        <TabsPage />
-      </MantineProvider>
-    </HotkeysProvider>
-  );
 }