133 lines
3.4 KiB
TypeScript
133 lines
3.4 KiB
TypeScript
import { useEffect, useMemo, useState } from "react";
|
|
import { Button } from "@mantine/core";
|
|
import { Spotlight, spotlight } from "@mantine/spotlight";
|
|
import type {
|
|
SpotlightActionData,
|
|
SpotlightActionGroupData,
|
|
SpotlightFilterFunction,
|
|
} from "@mantine/spotlight";
|
|
import Fuse from "fuse.js";
|
|
|
|
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,
|
|
};
|
|
});
|
|
}
|
|
|
|
function groupActionsByCategory(
|
|
actions: SpotlightActionData[],
|
|
): SpotlightActionGroupData[] {
|
|
const groupsMap = actions.reduce<Record<string, SpotlightActionData[]>>(
|
|
(acc, action) => {
|
|
const groupName = (action as any)._category || "OTHER";
|
|
if (!acc[groupName]) {
|
|
acc[groupName] = [];
|
|
}
|
|
acc[groupName].push(action);
|
|
return acc;
|
|
},
|
|
{},
|
|
);
|
|
|
|
return Object.entries(groupsMap).map(([group, groupActions]) => ({
|
|
group: group.toUpperCase(),
|
|
actions: groupActions,
|
|
}));
|
|
}
|
|
|
|
export function SpotlightTestDemo() {
|
|
const [query, setQuery] = useState("");
|
|
const [flatActions, setFlatActions] = useState<SpotlightActionData[]>([]);
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
const products = generate5kMockProducts();
|
|
|
|
const actions: SpotlightActionData[] = products.map((product) => ({
|
|
id: `prod-${product.id}`,
|
|
label: product.title,
|
|
description: `${product.brand} | $${product.price} - ${product.description}`,
|
|
_category: product.category,
|
|
}));
|
|
|
|
setFlatActions(actions);
|
|
}, 50);
|
|
}, []);
|
|
|
|
const fuseIndex = useMemo(() => {
|
|
if (flatActions.length === 0) return null;
|
|
|
|
return new Fuse(flatActions, {
|
|
keys: ["label", "description", "_category"],
|
|
threshold: 0.5,
|
|
distance: 100,
|
|
minMatchCharLength: 1,
|
|
ignoreLocation: true,
|
|
useExtendedSearch: false,
|
|
});
|
|
}, [flatActions]);
|
|
|
|
const customFuzzyFilter: SpotlightFilterFunction = (searchQuery) => {
|
|
const trimmed = searchQuery.trim();
|
|
|
|
if (!trimmed) {
|
|
return groupActionsByCategory(flatActions.slice(0, 20));
|
|
}
|
|
|
|
if (!fuseIndex) return [];
|
|
|
|
const results = fuseIndex.search(trimmed);
|
|
const matchedItems = results.slice(0, 50).map((r) => r.item);
|
|
|
|
return groupActionsByCategory(matchedItems);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Button onClick={spotlight.open}>Spotlight (Ctrl + K)</Button>
|
|
<Spotlight
|
|
shortcut="ctrl + k"
|
|
actions={flatActions}
|
|
filter={customFuzzyFilter}
|
|
query={query}
|
|
onQueryChange={setQuery}
|
|
nothingFound="Nothing found..."
|
|
highlightQuery
|
|
searchProps={{
|
|
placeholder: "Search...",
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
}
|