Function cellRenderer

src/components/common/ComponentList.jsx:485–630

({ columnIndex, rowIndex, key, style })

                      const rowCount = Math.ceil(filtered.length / columnCount);

                      const cellRenderer = ({ columnIndex, rowIndex, key, style }) => {
                        const index = rowIndex * columnCount + columnIndex;
                        if (index >= filtered.length) {
                          return <div key={key} style={style} />;
                        }
                        const item = filtered[index];
                        const to = `/${slug(fromPascal(item.categoryKey))}/${slug(fromPascal(item.componentKey))}`;
                        const isSaved = savedSet.has(item.key) || isComponentSaved(item.key);
                        const isLastCol = columnIndex === columnCount - 1;

                        const cellStyle = {
                          ...style,
                          width: columnWidth,
                          paddingRight: isLastCol ? 0 : GAP_PX,
                          paddingBottom: GAP_PX
                        };
                        return (
                          <div key={key} style={cellStyle}>
                            <Box
                              key={item.key}
                              as={RouterLink}
                              to={to}
                              data-item-key={item.key}
                              display="block"
                              role="group"
                              bg={colors.bgElevated}
                              border="1px solid rgba(255,255,255,0.04)"
                              borderRadius={`${CARD_RADIUS}px`}
                              p="6px"
                              textDecoration="none"
                              overflow="hidden"
                              transition="border-color 0.2s ease"
                              _hover={{ textDecoration: 'none', borderColor: 'rgba(255,255,255,0.1)' }}
                              onMouseEnter={() => setHoveredKey(item.key)}
                              onMouseLeave={() => setHoveredKey(prev => (prev === item.key ? null : prev))}
                            >
                              <Box position="relative" borderRadius="0px" overflow="hidden">
                                <LazyCardMedia
                                  key={item.videoUrl || item.key}
                                  videoUrl={item.videoUrl}
                                  playing={hoveredKey === item.key}
                                />

                                {item.isNew ? (
                                  <Box
                                    position="absolute"
                                    top="8px"
                                    left="8px"
                                    zIndex={2}
                                    px="8px"
                                    py="3px"
                                    borderRadius="6px"
                                    fontSize="10px"
                                    fontWeight={600}
                                    lineHeight={1}
                                    textTransform="uppercase"
                                    fontFamily="'Geist Mono', monospace"
                                    color="#d8aeff"