refactor(staking-home-of-content): migrate to Chakra

Author: TylerAPfledderer

src/components/Staking/StakingHomeTableOfContents.tsx

@@ -1,14 +1,6 @@
 import React from "react"
-import { motion } from "framer-motion"
-import { Link } from "gatsby"
-import styled from "@emotion/styled"
-
-const StyledTableOfContentsLink = styled(Link)`
-  position: relative;
-  display: inline-block;
-  color: ${({ theme }) => theme.colors.text300};
-  margin-bottom: 0.5rem !important;
-`
+import { Link as GatsbyLink } from "gatsby"
+import { Box, Link, List, ListItem } from "@chakra-ui/react"
 
 interface Item {
   id: string
@@ -33,40 +25,21 @@ const TableOfContentsLink: React.FC<ITableOfContentsLinkProps> = ({
     classes += " active"
   }
   return (
-    <StyledTableOfContentsLink to={url} className={classes}>
+    <Link
+      as={GatsbyLink}
+      to={url}
+      className={classes}
+      position="relative"
+      display="inline-block"
+      color="text300"
+      // `li :last-child` global selector wants to override this without `!important`
+      mb="0.5rem !important"
+    >
       {title}
-    </StyledTableOfContentsLink>
+    </Link>
   )
 }
 
-const OuterList = styled(motion.ul)`
-  list-style-type: none;
-  list-style-image: none;
-  padding: 0;
-  margin: 0;
-  font-size: 1.25rem;
-  text-align: right;
-  line-height: 1.6;
-  font-weight: 400;
-  padding-right: 0.25rem;
-  padding-left: 1rem;
-
-  @media (max-width: ${(props) => props.theme.breakpoints.l}) {
-    display: none;
-  }
-`
-
-const Aside = styled.aside`
-  padding: 0rem;
-  text-align: right;
-  margin-bottom: 2rem;
-  overflow-y: auto;
-`
-
-const ListItem = styled.li`
-  margin: 0;
-`
-
 export interface IProps {
   items: Array<Item>
 }
@@ -75,17 +48,17 @@ const StakingHomeTableOfContents: React.FC<IProps> = ({ items }) => {
   if (!items) return null
 
   return (
-    <Aside>
-      <OuterList>
+    <Box as="nav" p={0} textAlign="right" mb={8} overflowY="auto">
+      <List fontSize="xl" lineHeight={1.6} fontWeight={400} ps={4} pe={1} m={0}>
         {items.map((item, index) => (
-          <ListItem key={index}>
+          <ListItem key={index} m={0}>
             <div>
               <TableOfContentsLink item={item} />
             </div>
           </ListItem>
         ))}
-      </OuterList>
-    </Aside>
+      </List>
+    </Box>
   )
 }