import {type NextPage} from "next"; import Head from "next/head"; // @ts-ignore import iconList from "@utils/iconList"; import {useEffect, useMemo, useState} from "react"; import {useDebounce} from "usehooks-ts"; 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 Home: NextPage = () => { const [query, setQuery] = useState(""); const [showLoading, setShowLoading] = useState(false); const [timing, setTiming] = useState(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 i).slice(0, 100)}/>; }, [filtered]); return ( <> Icons
setQuery(value)} value={query} /> {showLoading ? : (query.length == 0 ? icons.length : filtered.length)} { timing !== 0 ? {timing}ms : null }
{catalog}
{/*
*/}
); }; export default Home;