Index searching, test Fuse.js

2025-12-06 01:15:19 -06:00 · 2023-02-16 04:25:26 -06:00
parent e0deb2af50
commit e83fd2a568
1 changed files with 105 additions and 0 deletions
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -0,0 +1,105 @@
+import {type NextPage} from "next";
+import Head from "next/head";
+import Card from "../components/Card";
+// @ts-ignore
+import iconList from "@utils/iconList";
+import {useEffect, useMemo, useState} from "react";
+import {useDebounce} from "usehooks-ts";
+// import Fuse from "fuse.js";
+import {AiOutlineLoading3Quarters} from "react-icons/ai";
+import IconCatalog from "@components/render/IconCatalog";
+import NoSSR from 'react-no-ssr';
+
+const icons = iconList as { id: string, setId: string }[];
+// const fuse = new Fuse(icons, {keys: ["id", "setId"], threshold: 0.2})
+const maximumResults = 10000;
+
+const Home: NextPage = () => {
+    const [query, setQuery] = useState("");
+    const [showLoading, setShowLoading] = useState(false);
+    const [timing, setTiming] = useState<number>(0);
+    const debouncedQuery = useDebounce(query, 300);
+
+    useEffect(() => {
+        setShowLoading(query.length != 0);
+    }, [query]);
+
+
+    const filtered = useMemo(() => {
+        const start = new Date();
+        const results = icons.filter(({id}) => id.toLowerCase().indexOf(query) !== -1);
+        const end = new Date();
+
+        // const results = fuse.search(query, {limit: maximumResults});
+        setShowLoading(false);
+        setTiming(end.getTime() - start.getTime());
+        return results;
+    }, [debouncedQuery]);
+
+    const catalog = useMemo(() => {
+        return <IconCatalog icons={filtered.map(i => i).slice(0, 100)}/>;
+    }, [filtered]);
+
+    return (
+        <>
+            <Head>
+                <title>Icons</title>
+                <meta name="description" content="Generated by create-t3-app"/>
+                <link rel="icon" href="/favicon.ico"/>
+            </Head>
+            <main className="flex flex-col items-center m-auto p-6 max-w-[100ch]">
+                <div className="flex max-w-[60ch] px-1 py-2 m-4">
+                    <input
+                        className="grow bg-transparent ring-0 outline-none text-xl"
+                        placeholder="Search for an icon..."
+                        onChange={({target: {value}}) => setQuery(value)}
+                        value={query}
+                    />
+                    <NoSSR>
+                        <span className="shrink text-xl text-zinc-500">
+                            {showLoading ? <AiOutlineLoading3Quarters className="animate-spin h-5 w-5"/>
+                                : (query.length == 0
+                                    ? icons.length
+                                    : (filtered.length === maximumResults
+                                        ? `${maximumResults}+`
+                                        : filtered.length))}
+                        </span>
+                        {
+                            timing !== 0
+                                ? <span className="ml-2 shrink text-lg text-zinc-400">{timing}ms</span>
+                                : null
+                        }
+                    </NoSSR>
+                </div>
+                <div>
+                    {catalog}
+                </div>
+                <ul role="list" className="hidden grid gap-4 p-0 link-card-grid"
+                    style={{gridTemplateColumns: "repeat(auto-fit, minmax(24ch, 1fr))"}}>
+                    <Card
+                        href="https://docs.astro.build/"
+                        title="Documentation"
+                        body="Learn how Astro works and explore the official API docs."
+                    />
+                    <Card
+                        href="https://astro.build/integrations/"
+                        title="Integrations"
+                        body="Supercharge your project with new frameworks and libraries."
+                    />
+                    <Card
+                        href="https://astro.build/themes/"
+                        title="Themes"
+                        body="Explore a galaxy of community-built starter themes."
+                    />
+                    <Card
+                        href="https://astro.build/chat/"
+                        title="Community"
+                        body="Come say hi to our amazing Discord community. ❤️"
+                    />
+                </ul>
+            </main>
+        </>
+    );
+};
+
+export default Home;