jimlee/dashboard-icons
1
0
Fork 0
mirror of https://github.com/walkxcode/dashboard-icons.git synced 2025-10-26 13:09:04 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

refactor(web): extract grid classes and add documentation

Browse Source 
Extract shared grid classes into GRID_CLASSES constant for reusability. Add JSDoc comments to explain the purpose of IconsGrid (non-virtualized for small lists) and VirtualizedIconsGrid (optimized for large datasets) components
This commit is contained in:
Thomas Camlong
2025-10-01 18:22:44 +02:00
parent db893d4f97
commit bf93408568
1 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/components/icon-grid.tsx
View File

@@ -8,9 +8,19 @@ interface IconsGridProps {
matchedAliases: Record<string, string>
}
/**
* Base grid layout component used for both regular icon display and virtualized display
* Displays icons in a responsive grid with different column counts per breakpoint
*/
export const GRID_CLASSES = "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4"
/**
* Simple non-virtualized grid for displaying icons
* Used for smaller lists (e.g., related icons, first 120 results)
*/
export 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">
<div className={`${GRID_CLASSES} mt-2`}>
{filteredIcons.slice(0, 120).map(({ name, data }) => (
<IconCard key={name} name={name} data={data} matchedAlias={matchedAliases[name]} />
))}
@@ -18,6 +28,10 @@ export function IconsGrid({ filteredIcons, matchedAliases }: IconsGridProps) {
)
}
/**
* Virtualized grid for displaying large lists of icons efficiently
* Only renders visible rows for better performance with thousands of icons
*/
export function VirtualizedIconsGrid({ filteredIcons, matchedAliases }: IconsGridProps) {
const listRef = useRef<HTMLDivElement | null>(null)
const [windowWidth, setWindowWidth] = useState(0)
@@ -72,7 +86,7 @@ export function VirtualizedIconsGrid({ filteredIcons, matchedAliases }: IconsGri
width: "100%",
transform: `translateY(${virtualRow.start - rowVirtualizer.options.scrollMargin}px)`,
}}
className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4"
className={GRID_CLASSES}
>
{rowIcons.map(({ name, data }) => (
<IconCard key={name} name={name} data={data} matchedAlias={matchedAliases[name]} />