diff --git a/src/App.tsx b/src/App.tsx index 6bc9159..15ff41d 100644 --- a/src/App.tsx +++ b/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() { diff --git a/src/cmdkTestDemo.tsx b/src/cmdkTestDemo.tsx index c3c2e95..bcb57ed 100644 --- a/src/cmdkTestDemo.tsx +++ b/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() { No results found. - - {actions.map((action) => ( - + {actions.slice(0, 50).map((action) => ( +
{action.label}