feat :add 5k data for test cmdk

src/App.tsx

@@ -1,140 +1,11 @@
-import { useState, useEffect } from "react";
-import { MantineProvider, Tabs, Button } from "@mantine/core";
-import {
-  HotkeysProvider,
-  useHotkeys,
-  useHotkeysContext,
-} from "react-hotkeys-hook";
-import { Command } from "cmdk";
+import { MantineProvider } from "@mantine/core";
+import CmdkTestDemo from "./CmdkTestDemo";
 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 />
-      </MantineProvider>
-    </HotkeysProvider>
+    <MantineProvider>
+      <CmdkTestDemo />
+    </MantineProvider>
   );
 }

src/cmdkTestDemo.tsx

@@ -0,0 +1,83 @@
+import { Button } from "@mantine/core";
+import { Command } from "cmdk";
+import { useMemo, useState } from "react";
+interface Product {
+  id: number;
+  title: string;
+  description: string;
+  price: number;
+  category: string;
+  brand: string;
+}
+function generate5kMockProducts(): Product[] {
+  const categories = [
+    "Electronics",
+    "Fashion",
+    "Home & Living",
+    "Beauty & Care",
+    "Sports & Outdoors",
+    "Automotive",
+  ];
+  const brands = ["Sony", "Samsung", "Apple", "Nike", "Adidas", "IKEA"];
+
+  return Array.from({ length: 5000 }, (_, index) => {
+    const id = index + 1;
+    const category = categories[index % categories.length];
+    const brand = brands[index % brands.length];
+
+    return {
+      id,
+      title: `${brand} High-End Item #${id}`,
+      description: `Premium ${category.toLowerCase()} product manufactured by ${brand}. High availability in stock.`,
+      price: Math.floor(Math.random() * 900) + 10,
+      category,
+      brand,
+    };
+  });
+}
+const MOCK_PRODUCTS = generate5kMockProducts();
+export default function CmdkTestDemo() {
+  const [opened, setOpened] = useState(false);
+  const actions = useMemo(() => {
+    return MOCK_PRODUCTS.map((product) => ({
+      id: String(product.id),
+      label: product.title,
+      description: `${product.brand} • ${product.category} - $${product.price}`,
+    }));
+  }, []);
+
+  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.slice(0, 50).map((action) => (
+              <Command.Item
+                key={action.id}
+                value={`${action.label} ${action.description}`}
+              >
+                <div>
+                  <div>{action.label}</div>
+                  <small style={{ color: "var(--mantine-color-dimmed)" }}>
+                    {action.description}
+                  </small>
+                </div>
+              </Command.Item>
+            ))}
+          </Command.Group>
+        </Command.List>
+      </Command.Dialog>
+    </>
+  );
+}