import React from "react"; import ProgressiveImage from "react-progressive-image-loading"; import { Pokemon } from "../features/pokemonSlice"; import { PokemonTypePlaceholders } from "../globals"; import { leftPad } from "../utils/leftPad"; import { AiOutlineCaretDown, AiOutlineCaretRight } from "react-icons/ai"; import { ChainLink } from "../features/evolutionChainSlice"; import { useHistory } from "react-router-dom"; const MaskSize = 200; const ImageSize = 150; const MaskStyling = { width: MaskSize, height: MaskSize, bottom: 0, }; const ImageContainerStyling = { width: ImageSize, height: ImageSize, display: "block", left: 0, right: 0, bottom: 25, margin: "auto", }; type Props = { pokemon: Pokemon; chain: ChainLink | undefined; selectedBackgroundColor: { light: string; medium: string }; }; const 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> ); }; export default PokemonEvolution;