Function CodeExamples

components/landing/CodeExamples.tsx:11–120

()

const PAGE_SIZE = 6
export const CodeExamples = () => {
  const { productCodeExamples } = useProductLandingContext()
  const { t } = useTranslation('product_landing')
  const [numVisible, setNumVisible] = useState(PAGE_SIZE)
  const [search, setSearch] = useState('')
  const [typed, setTyped] = useState('')

  useEffect(() => {
    setNumVisible(PAGE_SIZE) // reset the visible count (only matters after searching)
  }, [search])

  const isSearching = !!search
  let searchResults: typeof productCodeExamples = []
  if (isSearching) {
    // The following replace method escapes special characters in regular expression creation.
    const matchReg = new RegExp(search.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'), 'i')
    searchResults = productCodeExamples.filter((example) => {
      const searchableStr = `${example.tags.join(' ')} ${example.title} ${example.description}`
      return matchReg.test(searchableStr)
    })
  }

  return (
    <div>
      <form
        data-search="hide"
        className="pr-lg-3 mb-5 mt-3"
        onSubmit={(event) => {
          event.preventDefault()
          setSearch(typed.trim())
        }}
      >
        <Text
          className="ml-1 mr-2"
          fontWeight="bold"
          fontSize={2}
          as="label"
          htmlFor="searchCodeExamples"
          id="searchCodeExamples"
        >
          Search code examples:
        </Text>
        <input
          data-testid="code-examples-input"
          className="input-lg py-2 px-3 col-12 col-lg-8 form-control"
          placeholder={t('search_code_examples')}
          type="search"
          autoComplete="off"
          aria-label={t('search_code_examples')}
          onChange={(event) => setTyped(event.target.value)}
          value={typed}
        />
        <button data-testid="code-examples-search-btn" className="btn ml-2 py-2" type="submit">
          Search
        </button>
      </form>

      {isSearching && (