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

Improve scaling on multiple viewports

Browse Source 
- fix improper variable being used
- extract useMemo into variable
This commit is contained in:
Xevion
2023-02-17 02:18:27 -06:00
parent f6bcca0421
commit 0e1c7f4af5
2 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/render/IconCatalog.tsx
View File

@@ -7,7 +7,7 @@ type Props = {
const IconCatalog: FunctionComponent<Props> = ({icons}) => { const IconCatalog: FunctionComponent<Props> = ({icons}) => {
return <div return <div
className="flex flex-wrap rounded gap-y-4 p-1.5 rounded overflow-x-clip mb-5">{icons.map(({id, setId}) => { className="grid grid-cols-3 sm:grid-cols-5 md:grid-cols-8 lg:grid-cols-9 xl:grid-cols-11 rounded gap-4 p-1.5 rounded overflow-x-clip mb-5">{icons.map(({id, setId}) => {
return <DisplayIconSingle key={id + setId} id={id} setId={setId}/> return <DisplayIconSingle key={id + setId} id={id} setId={setId}/>
})} })}
</div> </div>

26
src/pages/index.tsx
View File

@@ -4,7 +4,7 @@ import Head from "next/head";
import iconList from "@utils/iconList"; import iconList from "@utils/iconList";
import {useEffect, useMemo, useState} from "react"; import {useEffect, useMemo, useState} from "react";
import {useDebounce} from "usehooks-ts"; import {useDebounce} from "usehooks-ts";
import { useHotkeys } from 'react-hotkeys-hook' import {useHotkeys} from 'react-hotkeys-hook'
import {AiOutlineLoading3Quarters} from "react-icons/ai"; import {AiOutlineLoading3Quarters} from "react-icons/ai";
import IconCatalog from "@components/render/IconCatalog"; import IconCatalog from "@components/render/IconCatalog";
import NoSSR from 'react-no-ssr'; import NoSSR from 'react-no-ssr';
@@ -37,7 +37,7 @@ const Home: NextPage = () => {
}, [debouncedQuery]); }, [debouncedQuery]);
useEffect(() => { useEffect(() => {
setLazyIcons(icons.slice(0, 100)) setLazyIcons(allFilteredIcons.slice(0, 100))
}, [allFilteredIcons]); }, [allFilteredIcons]);
useHotkeys(['ctrl+k', 'ctrl+/'], () => { useHotkeys(['ctrl+k', 'ctrl+/'], () => {
@@ -46,6 +46,16 @@ const Home: NextPage = () => {
const [searchRef, focusSearch] = useFocus<HTMLInputElement>() const [searchRef, focusSearch] = useFocus<HTMLInputElement>()
const [lazyIcons, setLazyIcons] = useState<IconIdentifierPair[]>([]); const [lazyIcons, setLazyIcons] = useState<IconIdentifierPair[]>([]);
const infiniteScroll = useMemo(() => <InfiniteScroll hasMore={lazyIcons.length < allFilteredIcons.length}
loader={<span>Loading...</span>}
dataLength={lazyIcons.length}
next={() => {
const newLength = Math.min(lazyIcons.length + 300, allFilteredIcons.length)
setLazyIcons(allFilteredIcons.slice(0, newLength))
}}>
<IconCatalog icons={lazyIcons}/>
</InfiniteScroll>, [lazyIcons]);
return ( return (
<> <>
<Head> <Head>
@@ -53,7 +63,7 @@ const Home: NextPage = () => {
<meta name="description" content="Generated by create-t3-app"/> <meta name="description" content="Generated by create-t3-app"/>
<link rel="icon" href="/favicon.ico"/> <link rel="icon" href="/favicon.ico"/>
</Head> </Head>
<main className="flex flex-col items-center m-auto p-6 max-w-[100ch]"> <main className="flex flex-col items-center m-auto p-6 max-w-[130ch]">
<div className="flex max-w-[60ch] px-1 py-2 m-4"> <div className="flex max-w-[60ch] px-1 py-2 m-4">
<input <input
ref={searchRef} ref={searchRef}
@@ -78,15 +88,7 @@ const Home: NextPage = () => {
</NoSSR> </NoSSR>
</div> </div>
<div> <div>
{useMemo(() => <InfiniteScroll hasMore={lazyIcons.length < allFilteredIcons.length} {infiniteScroll}
loader={<span>Loading...</span>}
dataLength={lazyIcons.length}
next={() => {
const newLength = Math.min(lazyIcons.length + 300, allFilteredIcons.length)
setLazyIcons(allFilteredIcons.slice(0, newLength))
}}>
<IconCatalog icons={lazyIcons}/>
</InfiniteScroll>, [lazyIcons])}
</div> </div>
</main> </main>
</> </>