feat :add 5k data for test cmdk

src/App.tsx

@@ -1,5 +1,5 @@
 import { MantineProvider } from "@mantine/core";
-import CmdkTestDemo from "./cmdkTestDemo";
+import CmdkTestDemo from "./CmdkTestDemo";
 import "@mantine/core/styles.css";
 
 export default function App() {

src/cmdkTestDemo.tsx

@@ -1,15 +1,50 @@
 import { Button } from "@mantine/core";
 import { Command } from "cmdk";
-import { useState } from "react";
+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 = [
-    { id: "1", label: "First", description: "First panel" },
-    { id: "2", label: "Second", description: "Second panel" },
-    { id: "3", label: "Third", description: "Third panel" },
-  ];
+  const actions = useMemo(() => {
+    return MOCK_PRODUCTS.map((product) => ({
+      id: String(product.id),
+      label: product.title,
+      description: `${product.brand} • ${product.category} - $${product.price}`,
+    }));
+  }, []);
 
   return (
     <>
@@ -26,10 +61,12 @@ export default function CmdkTestDemo() {
 
         <Command.List>
           <Command.Empty>No results found.</Command.Empty>
-
           <Command.Group>
-            {actions.map((action) => (
-              <Command.Item key={action.id}>
+            {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)" }}>