mirror/dashboard-icons
1
0
Fork 0
mirror of https://github.com/walkxcode/dashboard-icons.git synced 2025-11-09 04:58:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

Virtualize (kind of) the list

Browse Source
This commit is contained in:
Thomas Camlong
2025-04-17 16:19:42 +02:00
parent b5e2cca8d9
commit e90d3c4b7f
3 changed files with 69 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
web/src/app/icons/components/icon-search.tsx
View File

@@ -399,11 +399,8 @@ export function IconSearch({ icons }: IconSearchProps) {
<span>{getSortLabel(sortOption)}</span>
</div>
</div>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4 mt-2">
{filteredIcons.map(({ name, data }) => (
<IconCard key={name} name={name} data={data} matchedAlias={matchedAliases[name] || null} />
))}
</div>
<IconsGrid filteredIcons={filteredIcons} matchedAliases={matchedAliases} />
</>
)}
</>
@@ -419,7 +416,6 @@ function IconCard({
data: Icon
matchedAlias?: string | null
}) {
return (
<MagicCard className="rounded-md shadow-md">
<Link prefetch={false} href={`/icons/${name}`} className="group flex flex-col items-center p-3 sm:p-4 cursor-pointer">
@@ -440,3 +436,21 @@ function IconCard({
</MagicCard>
)
}
interface IconsGridProps {
filteredIcons: { name: string; data: Icon }[]
matchedAliases: Record<string, string>
}
function IconsGrid({ filteredIcons, matchedAliases }: IconsGridProps) {
return (
<>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4 mt-2">
{filteredIcons.slice(0, 120).map(({ name, data }) => (
<IconCard key={name} name={name} data={data} matchedAlias={matchedAliases[name] || null} />
))}
</div>
{filteredIcons.length > 120 && <p className="text-sm text-muted-foreground">And {filteredIcons.length - 120} more...</p>}
</>
)
}