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;

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

@@ -1,38 +0,0 @@
-import { Badge, Flex, Link, Text } from '@chakra-ui/react';
-
-type GuideListItemProps = {
-  title: string;
-  date: string;
-  isPro?: boolean;
-};
-
-export function GuideListItem(props: GuideListItemProps) {
-  const { title, date, isPro = false } = props;
-
-  return (
-    <Link
-      fontSize='15px'
-      px='0'
-      py='8px'
-      d='flex'
-      fontWeight={500}
-      color='gray.600'
-      alignItems='center'
-      justifyContent={'space-between'}
-      _hover={{
-        textDecoration: 'none',
-        color: 'blue.400',
-        '& .guide-title': {
-          transform: 'translateX(10px)'
-        }
-      }}
-    >
-
-      <Flex alignItems='center' className='guide-title' transition={'200ms'}>
-        <Text as='span' ml='7px'>{title}</Text>
-        {isPro && <Badge pos='relative' top='1px' variant='subtle' colorScheme='purple' ml='10px'>Pro</Badge>}
-      </Flex>
-      <Text fontSize='13px' color='gray.500' as='span'>{date}</Text>
-    </Link>
-  );
-}

pages/index.tsx

@@ -1,13 +1,13 @@
-import { Box, Container, Heading, Link, SimpleGrid, StackDivider, Text, Tooltip, VStack } from '@chakra-ui/react';
+import { Box, Container, Heading, Link, SimpleGrid, Text } from '@chakra-ui/react';
-import { InfoIcon } from '@chakra-ui/icons';
 import { Header } from '../components/header';
 import { Footer } from '../components/footer';
 import { UpdatesBanner } from '../components/updates-banner';
 import { OpensourceBanner } from '../components/opensource-banner';
-import { GuideListItem } from './guides/components/guide-list-item';
 import { DimmedMore } from '../components/dimmed-more';
-import { VideoListItem } from './watch/components/video-list-item';
 import { RoadmapGridItem } from './roadmaps/components/roadmap-grid-item';
+import { LinksListItem } from '../components/links-list-item';
+import { VideoIcon } from '../icons/video-icon';
+import { LinksList } from '../components/links-list';
 
 export default function Home() {
   return (
@@ -28,12 +28,18 @@ export default function Home() {
               guides</Link> which we hope you are going to love.</Text>
           </Box>
           <SimpleGrid columns={{ xl: 3, md: 3, sm: 2, base: 1 }} spacing='20px'>
-            <RoadmapGridItem colorIndex={0} title={'Frontend'} subtitle={'Step by step guide to becoming a frontend developer in 2021'} />
+            <RoadmapGridItem colorIndex={0} title={'Frontend'}
-            <RoadmapGridItem colorIndex={1} title={'Backend'} subtitle={'Step by step guide to becoming a backend developer in 2021'} />
+                             subtitle={'Step by step guide to becoming a frontend developer in 2021'} />
-            <RoadmapGridItem colorIndex={2} title={'DevOps'} subtitle={'Step by step guide for DevOps or Operations role in 2021'} />
+            <RoadmapGridItem colorIndex={1} title={'Backend'}
-            <RoadmapGridItem colorIndex={3} title={'React'} subtitle={'Step by step guide to become a React Developer in 2021'} />
+                             subtitle={'Step by step guide to becoming a backend developer in 2021'} />
-            <RoadmapGridItem colorIndex={4} title={'DBA'} subtitle={'Step by step guide to become a PostgreSQL DBA in 2021'} isCommunity />
+            <RoadmapGridItem colorIndex={2} title={'DevOps'}
-            <RoadmapGridItem colorIndex={5} title={'Android'} subtitle={'Step by step guide to become an Android Developer in 2021'} isCommunity />
+                             subtitle={'Step by step guide for DevOps or Operations role in 2021'} />
+            <RoadmapGridItem colorIndex={3} title={'React'}
+                             subtitle={'Step by step guide to become a React Developer in 2021'} />
+            <RoadmapGridItem colorIndex={4} title={'DBA'}
+                             subtitle={'Step by step guide to become a PostgreSQL DBA in 2021'} isCommunity />
+            <RoadmapGridItem colorIndex={5} title={'Android'}
+                             subtitle={'Step by step guide to become an Android Developer in 2021'} isCommunity />
           </SimpleGrid>
         </Container>
       </Box>
@@ -44,24 +50,20 @@ export default function Home() {
             <Heading color='green.500' fontSize='25px' mb='5px'>Visual Guides</Heading>
           </Box>
 
-          <VStack
+          <LinksList>
-            rounded='5px'
+            <LinksListItem title='Session based Authentication' badgeText='pro' subtitle='June 12, 2021' />
-            divider={<StackDivider borderColor='gray.200' />}
+            <LinksListItem title='Session based Authentication' subtitle='June 12, 2021' />
-            spacing={0}
+            <LinksListItem title='JSON Web Tokens' subtitle='June 05, 2021' />
-            align='stretch'
+            <LinksListItem title='Token Based Authentication' subtitle='May 15, 2021' />
-          >
+            <LinksListItem title='Character Encodings' badgeText='pro' subtitle='March 06, 2021' />
-            <GuideListItem title='Session based Authentication' date='June 12, 2021' />
+            <LinksListItem title='SSL vs TLS vs HTTPs vs SSH' subtitle='February 15, 2021' />
-            <GuideListItem title='JSON Web Tokens' date='June 05, 2021' />
+            <LinksListItem title='Continuous Integration and Deployment' subtitle='February 15, 2021' />
-            <GuideListItem title='Token Based Authentication' date='May 15, 2021' />
+            <LinksListItem title='Authentication' subtitle='February 01, 2021' />
-            <GuideListItem isPro title='Character Encodings' date='March 06, 2021' />
+            <LinksListItem title='DHCP in One Picture' subtitle='February 01, 2021' />
-            <GuideListItem title='SSL vs TLS vs HTTPs vs SSH' date='February 15, 2021' />
+            <LinksListItem title='Session Based Authentication' subtitle='February 01, 2021' />
-            <GuideListItem title='Continuous Integration and Deployment' date='February 15, 2021' />
-            <GuideListItem title='Authentication' date='February 01, 2021' />
-            <GuideListItem title='DHCP in One Picture' date='February 01, 2021' />
-            <GuideListItem title='Session Based Authentication' date='February 01, 2021' />
 
             <DimmedMore text='View all Guides' />
-          </VStack>
+          </LinksList>
         </Container>
       </Box>
 
@@ -71,24 +73,30 @@ export default function Home() {
             <Heading color='green.500' fontSize='25px' mb='5px'>Video Explanations</Heading>
           </Box>
 
-          <VStack
+          <LinksList>
-            rounded='5px'
+            <LinksListItem title='Transport Protocols: TCP vs UDP' subtitle='15 minutes' icon={<VideoIcon
-            divider={<StackDivider borderColor='gray.200' />}
+              style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
-            spacing={0}
+            <LinksListItem title='OSI Model Explained' subtitle='10 minutes' icon={<VideoIcon
-            align='stretch'
+              style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
-          >
+            <LinksListItem title='Creating a React App' badgeText='pro' subtitle='15 minutes' icon={<VideoIcon
-            <VideoListItem title='Transport Protocols: TCP vs UDP' duration='15 minutes' />
+              style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
-            <VideoListItem title='OSI Model Explained' duration='10 minutes' />
+            <LinksListItem title='DOM vs Shadow DOM vs Virtual DOM' badgeText='pro' subtitle='15 minutes'
-            <VideoListItem title='Creating a React App' isPro duration='15 minutes' />
+                           icon={<VideoIcon
-            <VideoListItem title='DOM vs Shadow DOM vs Virtual DOM' isPro duration='15 minutes' />
+                             style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
-            <VideoListItem title='Everything you need to know about HTTP caching' isPro duration='10 minutes' />
+            <LinksListItem title='Everything you need to know about HTTP caching' badgeText='pro' subtitle='10 minutes'
-            <VideoListItem title='Content Delivery Networks' duration='5 minutes' />
+                           icon={<VideoIcon
-            <VideoListItem title='Load Balancers in Depth' duration='15 minutes' />
+                             style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
-            <VideoListItem title='DNS and how does it work?' duration='2 minutes' />
+            <LinksListItem title='Content Delivery Networks' subtitle='5 minutes' icon={<VideoIcon
-            <VideoListItem title='JavaScript Fetch API' duration='22 minutes' />
+              style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
+            <LinksListItem title='Load Balancers in Depth' subtitle='15 minutes' icon={<VideoIcon
+              style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
+            <LinksListItem title='DNS and how does it work?' subtitle='2 minutes' icon={<VideoIcon
+              style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
+            <LinksListItem title='JavaScript Fetch API' subtitle='22 minutes' icon={<VideoIcon
+              style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
 
             <DimmedMore text={'View all Videos'} />
-          </VStack>
+          </LinksList>
         </Container>
       </Box>
 

pages/watch/components/video-list-item.tsx

@@ -1,38 +0,0 @@
-import { Badge, Flex, Link, Text } from '@chakra-ui/react';
-import { VideoIcon } from '../../../icons/video-icon';
-
-type VideoListItemProps = {
-  title: string;
-  duration: string;
-  isPro?: boolean;
-};
-
-export function VideoListItem(props: VideoListItemProps) {
-  const { title, duration, isPro = false } = props;
-
-  return (
-    <Link
-      fontSize='15px'
-      p='10px'
-      d='flex'
-      fontWeight={500}
-      color='gray.600'
-      alignItems='center'
-      justifyContent={'space-between'}
-      _hover={{
-        textDecoration: 'none',
-        color: 'blue.400',
-        '& .video-title': {
-          transform: 'translateX(10px)'
-        }
-      }}
-    >
-      <Flex alignItems='center' className='video-title' transition={'200ms'}>
-        <VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
-        <Text as='span' ml='7px'>{title}</Text>
-        {isPro && <Badge pos='relative' top='1px' variant='subtle' colorScheme='purple' ml='10px'>Pro</Badge>}
-      </Flex>
-      <Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>{duration}</Text>
-    </Link>
-  );
-}