Function IconListBox

packages/dev/s2-docs/src/IconSearchView.tsx:101–128

({items, copiedId, onAction, listBoxClassName}: IconListBoxProps)

}

function IconListBox({items, copiedId, onAction, listBoxClassName}: IconListBoxProps) {
  return (
    <Virtualizer
      layout={GridLayout}
      layoutOptions={{
        minItemSize: new Size(64, 64),
        maxItemSize: new Size(64, 64),
        minSpace: new Size(12, 12),
        preserveAspectRatio: true
      }}>
      <ListBox
        onAction={item => onAction(item.toString())}
        items={items}
        layout="grid"
        className={listBoxClassName || style({width: '100%', scrollPaddingY: 4, padding: 8})}
        dependencies={[copiedId]}
        renderEmptyState={() => (
          <IllustratedMessage styles={style({marginX: 'auto', marginY: 32})}>
            <NoSearchResults />
            <Heading>No results</Heading>
            <Content>Try a different search term.</Content>
          </IllustratedMessage>
        )}>
        {item => <IconItem item={item} isCopied={copiedId === item.id} />}
      </ListBox>
    </Virtualizer>
  );
}

const itemStyle = style({
  ...focusRing(),