Refactor guides page

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

@@ -0,0 +1,30 @@
+import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react';
+
+type GuideGridItemProps = {
+  title: 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 } = props;
+
+  return (
+    <Link _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Box} 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>
+    </Link>
+  );
+}

pages/guides/index.tsx

@@ -5,6 +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';
 
 export default function Guides() {
   return (
@@ -17,28 +18,22 @@ export default function Guides() {
             <Text fontSize='15px'>Succinct graphical explanations to development related topics.</Text>
           </Container>
         </Box>
-        <Container maxW='container.md' position='relative'>
-          <Badge mt='40px' mb='10px' variant='solid' colorScheme='green'>Recent Guides</Badge>
-          {/*<Text mt='40px' mb='10px' fontWeight={700} color='green.500'>Recent Guides</Text>*/}
-          {/*<Heading mt='40px' mb='15px' color='green.500' fontSize='20px'>Recent Guides</Heading>*/}
+        <Container maxW='container.md' position='relative' mt='30px'>
           <Stack isInline mb='30px' spacing='15px'>
-            <Link _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Box} href='#' shadow='xl' p='20px' py='25px' rounded='10px' bg={'gray.700'} flex={1}>
-              <Text mb='10px' fontSize='13px' color='gray.400'>June 25, 2021</Text>
-              <Heading color='white' mb={'6px'} fontSize='22px'>Session Based Authentication</Heading>
-              <Text color='gray.300' fontSize='14px'>Learn what the Session Based Authentication is, the pros and cons
-                .</Text>
-            </Link>
-
-            <Link _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Box} href='#' shadow='xl' p='20px' py='25px' rounded='10px' bg={'purple.800'} flex={1}>
-              <Text mb='10px' fontSize='13px' color='gray.400'>June 25, 2021</Text>
-              <Heading color='white' mb={'6px'} fontSize='22px'>JSON Web Tokens</Heading>
-              <Text color='gray.300' fontSize='14px'>Learn what the Session Based Authentication is, the pros and cons
-                and how you can implement it in your
-                apps.</Text>
-            </Link>
+            <GuideGridItem
+              title='Session Based Authentication'
+              subtitle='Learn what the Session Based Authentication is, the pros and cons.'
+              date='June 25, 2021'
+              isNew
+            />
+            <GuideGridItem
+              title='JSON Web Tokens'
+              subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.'
+              date='June 25, 2021'
+              colorIndex={1}
+            />
           </Stack>
 
-          <Badge mt='30px' mb='10px' variant='solid' colorScheme='green'>Past Guides</Badge>
           <LinksList>
             <LinksListItem title='Session based Authentication' badgeText='pro' subtitle='June 12, 2021' />
             <LinksListItem title='Session based Authentication' subtitle='June 12, 2021' />