Refactor list and list items

components/links-list-item.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Badge, Flex, Link, Text } from '@chakra-ui/react';
+
+type LinksListItemProps = {
+  title: string;
+  subtitle: string;
+  badgeText?: string;
+  icon?: React.ReactChild
+};
+
+export function LinksListItem(props: LinksListItemProps) {
+  const { title, subtitle, badgeText, icon } = props;
+
+  return (
+    <Link
+      fontSize='15px'
+      py='9px'
+      d='flex'
+      fontWeight={500}
+      color='gray.600'
+      alignItems='center'
+      justifyContent={'space-between'}
+      _hover={{
+        textDecoration: 'none',
+        color: 'blue.400',
+        '& .list-item-title': {
+          transform: 'translateX(10px)'
+        }
+      }}
+    >
+      <Flex alignItems='center' className='list-item-title' transition={'200ms'}>
+        {icon}
+        <Text as='span'>{title}</Text>
+        {badgeText &&
+        <Badge pos='relative' top='1px' variant='subtle' colorScheme='purple' ml='10px'>{badgeText}</Badge>}
+      </Flex>
+      <Text as='span' fontSize='13px' color='gray.500'>{subtitle}</Text>
+    </Link>
+  );
+}

components/links-list.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { StackDivider, VStack } from '@chakra-ui/react';
+
+type LinksListProps = {
+  children: React.ReactChild[]
+};
+
+export function LinksList(props: LinksListProps) {
+  const { children } = props;
+
+  return (
+    <VStack
+      rounded='5px'
+      divider={<StackDivider borderColor='gray.200' />}
+      spacing={0}
+      align='stretch'
+    >
+      {children}
+    </VStack>
+  );
+}

components/opensource-banner.tsx

@@ -2,7 +2,7 @@ import { Box, Container, Heading, Link, Text } from '@chakra-ui/react';
 
 export function OpensourceBanner() {
   return (
-    <Box borderTopWidth={1} mt='60px' pt='70px' pb='80px' textAlign='center'>
+    <Box borderTopWidth={1} mt='60px' pt='70px' pb='30px' textAlign='center'>
       <Container maxW='container.md'>
         <Heading fontSize='35px' mb='20px'>Open Source</Heading>
         <Text lineHeight='26px' fontSize='16px' mb='20px'>The project is OpenSource,&nbsp;