Refactor SkipLink.tsx component to use ChakraUI

Author: MahendraBishnoi29

src/components/SkipLink.tsx

@@ -1,43 +1,31 @@
 import React from "react"
-import styled from "@emotion/styled"
 import Translation from "./Translation"
-
-const Div = styled.div`
-  background-color: ${(props) => props.theme.colors.primary};
-`
-
-const Anchor = styled.a`
-  line-height: 2rem;
-  position: absolute;
-  top: -3rem;
-  margin-left: 0.5rem;
-  color: ${(props) => props.theme.colors.background};
-  text-decoration: none;
-
-  &:focus {
-    position: static;
-  }
-`
-
-const DivAnchor = styled.div`
-  height: 80px;
-  margin-top: -80px;
-`
+import { Box, Link } from "@chakra-ui/react"
 
 export interface IProps {
   hrefId: string
 }
 
 export const SkipLink: React.FC<IProps> = ({ hrefId }) => {
   return (
-    <Div>
-      <Anchor href={hrefId}>
+    <Box bg="primary">
+      <Link
+        href={hrefId}
+        lineHeight="2rem"
+        position="absolute"
+        top="-3rem"
+        ml=".5rem"
+        color="background"
+        textDecorationLine="none"
+        _hover={{ textDecoration: "none" }}
+        _focus={{ position: "static" }}
+      >
         <Translation id="skip-to-main-content" />
-      </Anchor>
-    </Div>
+      </Link>
+    </Box>
   )
 }
 
 export const SkipLinkAnchor: React.FC<{ id: string }> = ({ id }) => {
-  return <DivAnchor id={id}></DivAnchor>
+  return <Box height="80px" mt="-80px" id={id}></Box>
 }