From a1ff1fe755811b32f051600e50e2de70ea7b3430 Mon Sep 17 00:00:00 2001
From: Avi Thour <thouravi@gmail.com>
Date: Fri, 2 Dec 2022 21:49:09 +0530
Subject: [PATCH] Extracted the style objects and props into variable

Extracted the common style objects and props into variables or constants to avoid repeating the same code and make the code easier to read.
Instead of repeating the same _hover styles in multiple places, I created a hoverStyles object and used it in each Link component.
---
 src/components/layouts/Footer.tsx | 30 +++++++++++-------------------
 1 file changed, 11 insertions(+), 19 deletions(-)

diff --git a/src/components/layouts/Footer.tsx b/src/components/layouts/Footer.tsx
index 14db5fddfe..cd9802ca11 100644
--- a/src/components/layouts/Footer.tsx
+++ b/src/components/layouts/Footer.tsx
@@ -12,6 +12,12 @@ import {
 
 import { DiscordIcon, GitHubIcon, TwitterIcon } from '../UI/icons';
 
+const hoverStyles = {
+  textDecoration: 'none',
+  bg: 'primary',
+  color: 'bg !important'
+};
+
 export const Footer: FC = () => {
   return (
     <Flex mt={4} direction={{ base: 'column', lg: 'row' }}>
@@ -32,11 +38,7 @@ export const Footer: FC = () => {
           <Center
             flex={1}
             color='primary'
-            _hover={{
-              textDecoration: 'none',
-              bg: 'primary',
-              color: 'bg !important'
-            }}
+            _hover={hoverStyles}
             borderRight='2px solid'
             borderColor='primary'
             p={4}
@@ -51,11 +53,7 @@ export const Footer: FC = () => {
           <Center
             flex={1}
             color='primary'
-            _hover={{
-              textDecoration: 'none',
-              bg: 'primary',
-              color: 'bg !important'
-            }}
+            _hover={hoverStyles}
             borderRight={{
               base: 'none',
               md: '2px solid'
@@ -81,9 +79,7 @@ export const Footer: FC = () => {
               lg: 'none'
             }}
             borderColor='primary !important'
-            _hover={{
-              bg: 'primary'
-            }}
+            _hover={hoverStyles}
             p={4}
           >
             <NextLink href={GETH_TWITTER_URL} passHref>
@@ -96,9 +92,7 @@ export const Footer: FC = () => {
           <Center
             data-group
             flex={1}
-            _hover={{
-              bg: 'primary'
-            }}
+            _hover={hoverStyles}
             borderWidth='2px'
             borderStyle='none solid'
             borderColor='primary'
@@ -114,9 +108,7 @@ export const Footer: FC = () => {
           <Center
             data-group
             flex={1}
-            _hover={{
-              bg: 'primary'
-            }}
+            _hover={hoverStyles}
             p={4}
           >
             <NextLink href={GETH_REPO_URL} passHref>