Function ProductTreeNodeList

components/landing/ProductArticlesList.tsx:32–80

({ treeNode }: { treeNode: ProductTreeNode })

}

const ProductTreeNodeList = ({ treeNode }: { treeNode: ProductTreeNode }) => {
  const [isShowingMore, setIsShowingMore] = useState(false)

  return (
    <div className="col-12 col-lg-4 mb-6 height-full">
      <h3 className="mb-3 f4">
        <Link className="color-unset text-underline" href={treeNode.href}>
          {treeNode.title}
        </Link>
      </h3>

      <ActionList variant="full">
        {treeNode.childPages.map((childNode, index) => {
          return (
            <ActionList.Item
              as="li"
              key={childNode.href + index}
              className={cx(
                'width-full pl-0',
                !isShowingMore && index >= maxArticles ? 'd-none' : null
              )}
              sx={{
                borderRadius: 0,
                ':hover': {
                  borderRadius: 0,
                },
              }}
            >
              <Link className="d-block width-full" href={childNode.href}>
                {childNode.title}
                {childNode.documentType === 'mapTopic' ? (
                  <small className="color-fg-muted d-inline-block">
                    &nbsp;&bull; {childNode.childPages.length} articles
                  </small>
                ) : null}
              </Link>
            </ActionList.Item>
          )
        })}
      </ActionList>
      {!isShowingMore && treeNode.childPages.length > maxArticles && (
        <button onClick={() => setIsShowingMore(true)} className="mt-2 btn-link Link--secondary">
          Show {treeNode.childPages.length - maxArticles} more{' '}
          <ChevronDownIcon className="v-align-text-bottom" />
        </button>
      )}
    </div>
  )
}