Created EvolutionSpecies component with motion

package.json

@@ -7,6 +7,7 @@
     "@emotion/styled": "^11.10.6",
     "@mui/material": "^5.11.14",
     "@reduxjs/toolkit": "^1.9.3",
+    "framer-motion": "^10.12.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-lazy-load-image-component": "^1.5.6",

src/components/EvolutionSpecies/EvolutionSpecies.css

@@ -0,0 +1,34 @@
+.evolution__sub__box {
+    display: flex;
+    align-items: center;
+    text-align: center;
+}
+
+.evolution__box .evo_img {
+    width: 80px;
+    height: 80px;
+    margin: auto;
+    display: flex;
+    cursor: pointer;
+}
+
+/* .evolution__img__div:hover {
+	transform: scale(1.05);
+} */
+
+.evolution__img__div {
+    height: 113px;
+    width: 113px;
+    display: flex;
+    border-radius: 50%;
+    box-shadow: 0 5px 15px 4px rgb(0 0 0 / 30%);
+    align-items: center;
+    justify-content: center;
+    transition: all 0.35s;
+    margin-top: 3vh;
+}
+
+.evolution__poke__name {
+    text-transform: capitalize;
+    margin: 10px 0;
+}

src/components/EvolutionSpecies/EvolutionSpecies.stories.tsx

@@ -0,0 +1,32 @@
+import EvolutionSpecies, { EvolutionSpeciesProps } from './EvolutionSpecies';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+export default {
+  title: 'Component/EvolutionSpecies',
+  component: EvolutionSpecies,
+} as ComponentMeta<typeof EvolutionSpecies>;
+
+const Template: ComponentStory<typeof EvolutionSpecies> = (
+  args: EvolutionSpeciesProps,
+) => <EvolutionSpecies {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  types: ['grass', 'poison'],
+  image_url:
+    'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/1.svg',
+};
+
+export const Bulbasaur = Template.bind({});
+Bulbasaur.args = {
+  types: ['grass', 'poison'],
+  image_url:
+    'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/1.svg',
+};
+
+export const Magneton = Template.bind({});
+Magneton.args = {
+  types: ['electric', 'steel'],
+  image_url:
+    'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/82.svg',
+};

src/components/EvolutionSpecies/EvolutionSpecies.tsx

@@ -0,0 +1,59 @@
+import { motion } from 'framer-motion';
+
+import './EvolutionSpecies.css';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+import { colorTypeGradients } from '../PokemonCard/utils';
+
+export interface EvolutionSpeciesProps {
+  types: string[];
+  image_url: string;
+}
+
+const EvolutionSpecies = ({ types, image_url }: EvolutionSpeciesProps) => {
+  let finalColor;
+  if (types.length === 2) {
+    finalColor = colorTypeGradients(types[0], types[1], types.length);
+  } else {
+    finalColor = colorTypeGradients(types[0], types[0], types.length);
+  }
+
+  return (
+    <div className={'evolution__sub__box'}>
+      <div>
+        <motion.div
+          animate={{ rotate: 360 }}
+          transition={{
+            duration: 2,
+            ease: 'easeOut',
+            type: 'spring',
+            bounce: 0.65,
+            damping: 25,
+          }}
+          whileHover={{ scale: 1.05 }}
+        >
+          <div
+            className="evolution__img__div"
+            style={{
+              background: `linear-gradient(${finalColor[0]}, ${finalColor[1]})`,
+            }}
+          >
+            <div className={'transparency__div'}>
+              <LazyLoadImage
+                alt={'image-pokemon'}
+                height={80}
+                width={80}
+                src={image_url}
+                visibleByDefault={false}
+                delayMethod={'debounce'}
+                effect={'blur'}
+                className={'evo_img'}
+              />
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default EvolutionSpecies;

src/features/InfoDialog/InfoDialog.css

@@ -180,41 +180,6 @@ html[data-theme='dark'] {
   gap: 0 0px;
 }
 
-.evolution__sub__box {
-  display: flex;
-  align-items: center;
-  text-align: center;
-}
-
-.evolution__box .evo_img {
-  width: 80px;
-  height: 80px;
-  margin: auto;
-  display: flex;
-  cursor: pointer;
-}
-
-/* .evolution__img__div:hover {
-	transform: scale(1.05);
-} */
-
-.evolution__img__div {
-  height: 113px;
-  width: 113px;
-  display: flex;
-  border-radius: 50%;
-  box-shadow: 0 5px 15px 4px rgb(0 0 0 / 30%);
-  align-items: center;
-  justify-content: center;
-  transition: all 0.35s;
-  margin-top: 3vh;
-}
-
-.evolution__poke__name {
-  text-transform: capitalize;
-  margin: 10px 0;
-}
-
 .arrow__right {
   font-size: 1.75rem;
   margin: 0 10px;

yarn.lock

@@ -1401,6 +1401,13 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7"
   integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==
 
+"@emotion/is-prop-valid@^0.8.2":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
 "@emotion/is-prop-valid@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
@@ -1408,6 +1415,11 @@
   dependencies:
     "@emotion/memoize" "^0.8.0"
 
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@emotion/memoize@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
@@ -7808,6 +7820,15 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
+framer-motion@^10.12.8:
+  version "10.12.8"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.12.8.tgz#2b2c99818d9e8531165d07eef569828a3b135d51"
+  integrity sha512-ylobYq3tGFjjAmRdBs5pL/R1+4AmOm69g/JbF5DcNETfRe8L9CjaX4acG83MjYdIsbsTGJmtR5qKx4glNmXO4A==
+  dependencies:
+    tslib "^2.4.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -14562,7 +14583,7 @@ tslib@^1.8.1, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0:
+tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
   integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==