react-icons/ai#AiOutlineCaretDown TypeScript Examples

The following examples show how to use react-icons/ai#AiOutlineCaretDown. 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: PokemonEvolution.tsx    From react-pokedex with MIT License 5 votes vote down vote up 
PokemonEvolution = ({
  pokemon,
  chain,
  selectedBackgroundColor,
}: Props) => {
  const history = useHistory();
  const imagePlaceholder = pokemon.types.map(({ type }) => {
    const [[, image]] = Object.entries(PokemonTypePlaceholders).filter(
      ([key, _]) => key === type.name
    );

    return image;
  });
  const minLevel = chain?.evolutionDetails[0]?.minLevel;

  return (
    <div className="mb-5 lg:mb-0 lg:flex lg:flex-row w-full">
      <div className="text-center mx-auto flex-1">
        <div className="relative mx-auto h-48 w-full">
          <div
            style={{
              ...MaskStyling,
              backgroundColor: selectedBackgroundColor.light,
            }}
            className="rounded-full absolute inset-x-auto mx-auto z-0 inline-block left-0 right-0"
          />
          <div
            onClick={() => history.push(`/pokemons/${pokemon.id}`)}
            className="cursor-pointer transform hover:-translate-y-2 transition-all duration-300"
            style={{
              ...ImageContainerStyling,
              position: "absolute",
            }}
          >
            <ProgressiveImage
              preview={imagePlaceholder[0]}
              src={pokemon.sprites.frontDefault}
              render={(src, style) => (
                <img src={src} style={style} alt={pokemon.name} />
              )}
            />
          </div>
        </div>
        <p className="mt-1 text-sm text-black font-semibold">
          #{leftPad(pokemon.id, 3)}
        </p>
        <h1 className="capitalize font-semibold text-xl">{pokemon.name}</h1>
        <p className="text-black text-sm font-semibold text-opacity-75">
          {minLevel && `Level ${minLevel}`}
        </p>
      </div>
      <p className="flex items-center mx-auto mt-2 mb-4 lg:mb-0 lg:mt-0">
        {chain?.evolvesTo.length !== 0 && (
          <>
            <AiOutlineCaretDown
              className="block mx-auto lg:hidden opacity-75"
              size={24}
            />
            <AiOutlineCaretRight
              className="hidden mx-auto lg:block opacity-75"
              size={24}
            />
          </>
        )}
      </p>
    </div>
  );
}