84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
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>
|
|
</>
|
|
);
|
|
}
|