refactor: 💡 separate reusable styles (#1)

Author: abrahamcalsin

src/components/hyperlink/index.ts

@@ -6,6 +6,11 @@ import {
   octoTailAnimated,
 } from '../keyframes';
 
+const animationProperties = css`
+  animation-duration: 560ms;
+  animation-timing-function: ease-in-out;
+`;
+
 export interface HyperlinkProps {
   animation?: string;
 }
@@ -19,92 +24,80 @@ export const Hyperlink = styled.a<HyperlinkProps>`
         return css`
           &:hover ${PathOctoLeftEar} {
             animation-name: ${octoLeftEarAnimated};
-            animation-duration: 560ms;
-            animation-timing-function: ease-in-out;
+            ${animationProperties}
           }
         `;
 
       case 'right-ear':
         return css`
           &:hover ${PathOctoRightEar} {
             animation-name: ${octoRightEarAnimated};
-            animation-duration: 560ms;
-            animation-timing-function: ease-in-out;
+            ${animationProperties}
           }
         `;
 
       case 'ears':
         return css`
           &:hover ${PathOctoLeftEar} {
             animation-name: ${octoLeftEarAnimated};
-            animation-duration: 560ms;
-            animation-timing-function: ease-in-out;
+            ${animationProperties}
           }
 
           &:hover ${PathOctoRightEar} {
             animation-name: ${octoRightEarAnimated};
-            animation-duration: 560ms;
-            animation-timing-function: ease-in-out;
+            ${animationProperties}
           }
         `;
 
       case 'tail':
         return css`
           &:hover ${PathOctoTail} {
             animation-name: ${octoTailAnimated};
-            animation-duration: 560ms;
-            animation-timing-function: ease-in-out;
+            ${animationProperties}
           }
         `;
 
       case 'tail-&-leftEar':
         return css`
           &:hover ${PathOctoLeftEar} {
             animation-name: ${octoLeftEarAnimated};
-            animation-duration: 560ms;
-            animation-timing-function: ease-in-out;
+            ${animationProperties}
           }
 
           &:hover ${PathOctoTail} {
             animation-name: ${octoTailAnimated};
-            animation-duration: 560ms;
-            animation-timing-function: ease-in-out;
+            ${animationProperties}
           }
         `;
 
       case 'tail-&-rightEar':
         return css`
           &:hover ${PathOctoRightEar} {
             animation-name: ${octoRightEarAnimated};
-            animation-duration: 560ms;
-            animation-timing-function: ease-in-out;
+            ${animationProperties}
           }
 
           &:hover ${PathOctoTail} {
             animation-name: ${octoTailAnimated};
-            animation-duration: 560ms;
-            animation-timing-function: ease-in-out;
+            ${animationProperties}
           }
         `;
 
       case 'all':
         return css`
           &:hover ${PathOctoTail} {
             animation-name: ${octoTailAnimated};
-            animation-duration: 560ms;
-            animation-timing-function: ease-in-out;
+            ${animationProperties}
           }
 
           &:hover ${PathOctoLeftEar} {
             animation-name: ${octoLeftEarAnimated};
-            animation-duration: 560ms;
-            animation-timing-function: ease-in-out;
+            ${animationProperties}
           }
 
           &:hover ${PathOctoRightEar} {
             animation-name: ${octoRightEarAnimated};
-            animation-duration: 560ms;
-            animation-timing-function: ease-in-out;
+            ${animationProperties}
           }
         `;