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 |
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>
);
}