xevion/icons
1
0
Fork 0
mirror of https://github.com/Xevion/icons.git synced 2025-12-06 01:15:19 -06:00
Code Issues Packages Projects Releases Wiki Activity

Index searching, test Fuse.js

Browse Source
This commit is contained in:
Xevion
2023-02-16 04:25:26 -06:00
parent e0deb2af50
commit e83fd2a568
1 changed files with 105 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/pages/index.tsx Normal file
View File

@@ -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;