Refactor page components

pages/guides/components/guide-grid-item.tsx

@@ -1,31 +0,0 @@
-import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react';
-
-type GuideGridItemProps = {
-  title: string;
-  href: string;
-  subtitle: string;
-  date: string;
-  isNew?: boolean;
-  colorIndex?: number;
-};
-
-const bgColorList = [
-  'gray.700',
-  'purple.800'
-];
-
-export function GuideGridItem(props: GuideGridItemProps) {
-  const { title, subtitle, date, isNew = false, colorIndex = 0, href } = props;
-
-  return (
-    <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={href} shadow='xl' p='20px'
-         rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
-      <Text mb='10px' fontSize='13px' color='gray.400'>
-        {isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}
-        {date}
-      </Text>
-      <Heading color='white' mb={'6px'} fontSize='20px'>{title}</Heading>
-      <Text color='gray.300' fontSize='14px'>{subtitle}</Text>
-    </Box>
-  );
-}

pages/guides/index.tsx

@@ -5,7 +5,7 @@ import { LinksListItem } from '../../components/links-list-item';
 import { OpensourceBanner } from '../../components/opensource-banner';
 import { UpdatesBanner } from '../../components/updates-banner';
 import { Footer } from '../../components/footer';
-import { GuideGridItem } from './components/guide-grid-item';
+import { GuideGridItem } from '../../components/guide/guide-grid-item';
 import { PageHeader } from '../../components/page-header';
 import { getAllGuides, GuideType } from '../../lib/guide';
 import Helmet from '../../components/helmet';