react-icons/fa#FaFilter JavaScript Examples

The following examples show how to use react-icons/fa#FaFilter. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: tools.js    From website with MIT License 5 votes vote down vote up 
Tools = ({ data }) => {
  const metaDescription = getMetaDescription(data)
  const [search, setSearch] = useState("")

  const filteredLanguages = data.languages.nodes.filter(lang => {
    return lang.name.toLowerCase().indexOf(search.toLowerCase()) !== -1
  })

  const filteredOther = data.other.nodes.filter(other => {
    return other.name.toLowerCase().indexOf(search.toLowerCase()) !== -1
  })

  return (
    <Layout>
      <Helmet>
        <meta charSet="utf-8" />
        <meta name="description" content={metaDescription} />
        <title>
          Analysis tools, linters, code quality checkers for{" "}
          {data.languages.nodes.length.toString()} languages
        </title>
      </Helmet>
      <div tw="flex items-center shadow px-4 max-w-full">
        <FaFilter tw="mr-2 inline-block" />
        <span tw="font-bold pr-4 whitespace-nowrap">Quick filter:</span>
        <input
          size="1"
          tw="p-2 my-4 box-border w-full bg-gray-100 border"
          type="text"
          value={search}
          onChange={e => setSearch(e.target.value)}
        />
      </div>
      {filteredLanguages.length !== 0 && (
        <article tw="flex flex-col shadow my-4 w-full">
          <div tw="bg-white flex flex-col justify-start p-6 w-full">
            <h1 tw="text-3xl font-semibold pb-10">
              Tools for Various Programming Languages
            </h1>
            <ul>
              {filteredLanguages.map(t => (
                <li key={t.id}>
                  <Card t={t} data={data} />
                </li>
              ))}
            </ul>
          </div>
        </article>
      )}
      {filteredOther.length !== 0 && (
        <article tw="flex flex-col shadow my-4 w-full">
          <div tw="bg-white flex flex-col justify-start p-6 w-full">
            <h1 tw="text-3xl font-semibold pb-10">
              Tools for Markup Languages and More
            </h1>
            <ul>
              {filteredOther.map(t => (
                <li key={t.id}>
                  <Card t={t} data={data} />
                </li>
              ))}
            </ul>
          </div>
        </article>
      )}
    </Layout>
  )
}