Function ExampleList

packages/dev/s2-docs/src/ExampleList.tsx:31–92

({tag, pages})

};

export function ExampleList({tag, pages}) {
  let examples = pages
    .filter(
      page =>
        page.name.startsWith('react-aria/examples/') &&
        !page.name.endsWith('index') &&
        (!tag || page.exports?.keywords.includes(tag))
    )
    .sort((a, b) => getTitle(a).localeCompare(getTitle(b)));

  return (
    <ul
      itemScope
      itemType="https://schema.org/ItemList"
      className={style({
        display: 'grid',
        gridTemplateColumns: `repeat(auto-fit, ${size(240)})`,
        gap: 24,
        marginTop: 32,
        padding: 0,
        listStyleType: 'none',
        justifyContent: {
          default: 'center',
          lg: 'start'
        }
      })}>
      <meta itemProp="name" content="Examples" />
      <ImageCoordinator>
        {examples.map(example => (
          <li
            key={example.url}
            itemProp="itemListElement"
            itemScope
            itemType="https://schema.org/ListItem">
            <div
              className={style({display: 'contents'})}
              itemProp="item"
              itemScope
              itemType="https://schema.org/TechArticle">
              <meta itemProp="url" content={example.url} />
              <Card href={example.url}>
                <CardPreview>
                  <ExampleImage name={example.name} itemProp="image" />
                </CardPreview>
                <Content>
                  <Text slot="title" itemProp="headline">
                    {getTitle(example)}
                  </Text>
                  {example.exports?.description ? (
                    <Text slot="description" itemProp="description">
                      {example.exports?.description}
                    </Text>
                  ) : null}
                </Content>
              </Card>
            </div>
          </li>
        ))}