Function IconsPageSearch

packages/dev/s2-docs/src/IconSearchView.tsx:282–311

()

}

export function IconsPageSearch() {
  let filter = useIconFilter();
  let {copiedId, handleCopyImport} = useCopyImport();

  return (
    <>
      <Autocomplete filter={filter}>
        <div className={style({display: 'flex', flexDirection: 'column', gap: 8})}>
          <SearchField size="L" aria-label="Search icons" placeholder="Search icons" />
          <InfoMessage>
            Press an item to copy its import statement. See <Link href="icons">Icons</Link> for more
            information.
          </InfoMessage>
          <IconListBox
            items={iconList}
            copiedId={copiedId}
            onAction={handleCopyImport}
            listBoxClassName={style({
              height: 440,
              width: '100%',
              maxHeight: '100%',
              overflow: 'auto',
              scrollPaddingY: 4
            })}
          />
        </div>
      </Autocomplete>
    </>
  );
}