Function SearchResultHit

components/search/SearchResults.tsx:71–125

({
  hit,
  query,
  totalHits,
  index,
  debug,
}: {
  hit: SearchResultHitT
  query: string
  totalHits: number
  index: number
  debug: boolean
})

}

function SearchResultHit({
  hit,
  query,
  totalHits,
  index,
  debug,
}: {
  hit: SearchResultHitT
  query: string
  totalHits: number
  index: number
  debug: boolean
}) {
  const title =
    hit.highlights.title && hit.highlights.title.length > 0 ? hit.highlights.title[0] : hit.title

  return (
    <div className={cx('my-6', styles.search_result)} data-testid="search-result">
      <p className="text-normal f5 color-fg-muted" style={{ wordSpacing: 2 }}>
        {hit.breadcrumbs.length > 1 && (
          <>
            <strong>{hit.breadcrumbs.split('/')[0]}</strong>
            {hit.breadcrumbs.replace(hit.breadcrumbs.split('/')[0], '')} /
          </>
        )}
      </p>
      <h2 className="f3">
        <Link
          href={hit.url}
          className="color-fg-accent"
          dangerouslySetInnerHTML={{ __html: title }}
          onClick={() => {
            sendEvent({
              type: EventType.searchResult,
              search_result_query: Array.isArray(query) ? query[0] : query,
              search_result_index: index,
              search_result_total: totalHits,
              search_result_rank: (totalHits - index) / totalHits,
              search_result_url: hit.url,
            })
          }}
        ></Link>
      </h2>
      {hit.highlights.content && hit.highlights.content.length > 0 && (
        <div dangerouslySetInnerHTML={{ __html: hit.highlights.content[0] }}></div>
      )}
      {debug && (
        <Text as="p" fontWeight="bold">
          score: <code style={{ marginRight: 10 }}>{hit.score}</code> popularity:{' '}
          <code>{hit.popularity}</code>
        </Text>
      )}
    </div>
  )
}

function ResultsPagination({ page, totalPages }: { page: number; totalPages: number }) {
  const router = useRouter()