Add visual guides navigation

pages/icons/text-icon.tsx

@@ -0,0 +1,20 @@
+export function TextIcon(props: any) {
+  return (
+    <svg
+      stroke='currentColor'
+      fill='currentColor'
+      strokeWidth='0'
+      viewBox='0 0 20 20'
+      height='1em'
+      width='1em'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        fillRule='evenodd'
+        d='M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z'
+        clipRule='evenodd'
+      />
+    </svg>
+  );
+}

pages/icons/video-icon.tsx

@@ -0,0 +1,21 @@
+export function VideoIcon(props: any) {
+  return (
+    <svg
+      stroke='currentColor'
+      fill='currentColor'
+      strokeWidth='0'
+      viewBox='0 0 24 24'
+      height='1em'
+      width='1em'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <g>
+        <path fill='none' d='M0 0h24v24H0z' />
+        <path
+          d='M3 3.993C3 3.445 3.445 3 3.993 3h16.014c.548 0 .993.445.993.993v16.014a.994.994 0 0 1-.993.993H3.993A.994.994 0 0 1 3 20.007V3.993zm7.622 4.422a.4.4 0 0 0-.622.332v6.506a.4.4 0 0 0 .622.332l4.879-3.252a.4.4 0 0 0 0-.666l-4.88-3.252z'
+        />
+      </g>
+    </svg>
+  );
+}

pages/index.tsx

@@ -1,5 +1,7 @@
 import { Badge, Box, Container, Flex, Heading, Image, Link, SimpleGrid, Stack, Text, Tooltip } from '@chakra-ui/react';
-import { ArrowForwardIcon, InfoIcon } from '@chakra-ui/icons';
+import { InfoIcon } from '@chakra-ui/icons';
+import { TextIcon } from './icons/text-icon';
+import { VideoIcon } from './icons/video-icon';
 
 export default function Home() {
   return (
@@ -95,7 +97,6 @@ export default function Home() {
         <Container maxW='container.md'>
           <Box pt='40px' mb='20px'>
             <Heading color='green.500' fontSize='25px' mb='5px'>Visual Guides</Heading>
-            {/*<Text>Programming topics explained succinctly through visuals.</Text>*/}
           </Box>
 
           <Stack>
@@ -108,8 +109,10 @@ export default function Home() {
                     }
                   }} borderBottomWidth={1}
                   py='5px' color='gray.600'>
-              <Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'>Session based
+              <Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
-                Authentication</Text>
+                    as='span'>
+                Session based Authentication
+              </Text>
               <Text fontSize='13px' color='gray.500' as='span'>June 12, 2021</Text>
             </Link>
 
@@ -122,7 +125,8 @@ export default function Home() {
                     }
                   }} borderBottomWidth={1}
                   py='5px' color='gray.600'>
-              <Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'>
+              <Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
+                    as='span'>
                 JSON Web Tokens
               </Text>
               <Text fontSize='13px' color='gray.500' as='span'>June 05, 2021</Text>
@@ -137,7 +141,8 @@ export default function Home() {
                     }
                   }} borderBottomWidth={1}
                   py='5px' color='gray.600'>
-              <Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'>
+              <Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
+                    as='span'>
                 Token Based Authentication
                 <Badge variant='subtle' colorScheme='purple' ml='5px'>Pro</Badge>
               </Text>
@@ -153,7 +158,9 @@ export default function Home() {
                     }
                   }} borderBottomWidth={1}
                   py='5px' color='gray.600'>
-              <Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'>Character Encodings</Text>
+              <Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
+                    as='span'>
+                Encodings</Text>
               <Text fontSize='13px' color='gray.500' as='span'>March 06, 2021</Text>
             </Link>
 
@@ -166,8 +173,10 @@ export default function Home() {
                     }
                   }} borderBottomWidth={1}
                   py='5px' color='gray.600'>
-              <Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'>SSL vs TLS vs HTTPs vs
+              <Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
-                SSH</Text>
+                    as='span'>
+                SSL vs TLS vs HTTPs vs SSH
+              </Text>
               <Text fontSize='13px' color='gray.500' as='span'>February 15, 2021</Text>
             </Link>
 
@@ -180,7 +189,9 @@ export default function Home() {
                     }
                   }} borderBottomWidth={1}
                   py='5px' color='gray.600'>
-              <Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'>Continuous Integration and
+              <Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
+                    as='span'>
+                Integration and
                 Deployment</Text>
               <Text fontSize='13px' color='gray.500' as='span'>February 15, 2021</Text>
             </Link>
@@ -194,7 +205,9 @@ export default function Home() {
                     }
                   }} borderBottomWidth={1}
                   py='5px' color='gray.600'>
-              <Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'>Basic Authentication</Text>
+              <Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
+                    as='span'>
+                Authentication</Text>
               <Text fontSize='13px' color='gray.500' as='span'>February 15, 2021</Text>
             </Link>
 
@@ -207,7 +220,8 @@ export default function Home() {
                     }
                   }} borderBottomWidth={1}
                   py='5px' color='gray.600'>
-              <Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'>
+              <Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
+                    as='span'>
                 Character Encodings
                 <Badge variant='subtle' colorScheme='purple' ml='5px'>Pro</Badge>
               </Text>
@@ -223,7 +237,8 @@ export default function Home() {
                     }
                   }} borderBottomWidth={1}
                   py='5px' color='gray.600'>
-              <Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'>
+              <Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
+                    as='span'>
                 DHCP in One Picture
               </Text>
               <Text fontSize='13px' color='gray.500' as='span'>February 01, 2021</Text>
@@ -238,7 +253,8 @@ export default function Home() {
                     }
                   }} borderBottomWidth={1}
                   py='5px' color='gray.600'>
-              <Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'>
+              <Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
+                    as='span'>
                 Session Based Authentication
               </Text>
               <Text fontSize='13px' color='gray.500' as='span'>February 01, 2021</Text>
@@ -252,7 +268,8 @@ export default function Home() {
                       transform: 'translateX(3px)'
                     }
                   }}>
-              View all Guides <Text d='inline-block' as='span' transition='200ms' className='forward-arrow'>&rarr;</Text>
+              View all Guides <Text d='inline-block' as='span' transition='200ms'
+                                    className='forward-arrow'>&rarr;</Text>
             </Link>
           </Stack>
         </Container>