github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Refactor list and list items

Browse Source
pull/1331/head
Kamran Ahmed 3 years ago
parent c8395aa3df
commit 41ec8327c4
6 changed files with 112 additions and 119 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 40
      components/links-list-item.tsx
  2. 21
      components/links-list.tsx
  3. 2
      components/opensource-banner.tsx
  4. 38
      pages/guides/components/guide-list-item.tsx
  5. 92
      pages/index.tsx
  6. 38
      pages/watch/components/video-list-item.tsx

40
components/links-list-item.tsx
Unescape View File

@ -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>
);
}

21
components/links-list.tsx
Unescape View File

@ -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>
);
}

2
components/opensource-banner.tsx
Unescape View File

@ -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;

38
pages/guides/components/guide-list-item.tsx
Unescape View File

@ -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>
);
}

92
pages/index.tsx
Unescape View File

@ -1,13 +1,13 @@
import { Box, Container, Heading, Link, SimpleGrid, StackDivider, Text, Tooltip, VStack } from '@chakra-ui/react';
import { InfoIcon } from '@chakra-ui/icons';
import { Box, Container, Heading, Link, SimpleGrid, Text } from '@chakra-ui/react';
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={1} title={'Backend'} subtitle={'Step by step guide to becoming a backend developer in 2021'} />
<RoadmapGridItem colorIndex={2} title={'DevOps'} 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 />
<RoadmapGridItem colorIndex={0} title={'Frontend'}
subtitle={'Step by step guide to becoming a frontend developer in 2021'} />
<RoadmapGridItem colorIndex={1} title={'Backend'}
subtitle={'Step by step guide to becoming a backend developer in 2021'} />
<RoadmapGridItem colorIndex={2} title={'DevOps'}
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
rounded='5px'
divider={<StackDivider borderColor='gray.200' />}
spacing={0}
align='stretch'
>
<GuideListItem title='Session based Authentication' date='June 12, 2021' />
<GuideListItem title='JSON Web Tokens' date='June 05, 2021' />
<GuideListItem title='Token Based Authentication' date='May 15, 2021' />
<GuideListItem isPro title='Character Encodings' date='March 06, 2021' />
<GuideListItem title='SSL vs TLS vs HTTPs vs SSH' date='February 15, 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' />
<LinksList>
<LinksListItem title='Session based Authentication' badgeText='pro' subtitle='June 12, 2021' />
<LinksListItem title='Session based Authentication' subtitle='June 12, 2021' />
<LinksListItem title='JSON Web Tokens' subtitle='June 05, 2021' />
<LinksListItem title='Token Based Authentication' subtitle='May 15, 2021' />
<LinksListItem title='Character Encodings' badgeText='pro' subtitle='March 06, 2021' />
<LinksListItem title='SSL vs TLS vs HTTPs vs SSH' subtitle='February 15, 2021' />
<LinksListItem title='Continuous Integration and Deployment' subtitle='February 15, 2021' />
<LinksListItem title='Authentication' subtitle='February 01, 2021' />
<LinksListItem title='DHCP in One Picture' subtitle='February 01, 2021' />
<LinksListItem title='Session Based Authentication' subtitle='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
rounded='5px'
divider={<StackDivider borderColor='gray.200' />}
spacing={0}
align='stretch'
>
<VideoListItem title='Transport Protocols: TCP vs UDP' duration='15 minutes' />
<VideoListItem title='OSI Model Explained' duration='10 minutes' />
<VideoListItem title='Creating a React App' isPro duration='15 minutes' />
<VideoListItem title='DOM vs Shadow DOM vs Virtual DOM' isPro duration='15 minutes' />
<VideoListItem title='Everything you need to know about HTTP caching' isPro duration='10 minutes' />
<VideoListItem title='Content Delivery Networks' duration='5 minutes' />
<VideoListItem title='Load Balancers in Depth' duration='15 minutes' />
<VideoListItem title='DNS and how does it work?' duration='2 minutes' />
<VideoListItem title='JavaScript Fetch API' duration='22 minutes' />
<LinksList>
<LinksListItem title='Transport Protocols: TCP vs UDP' subtitle='15 minutes' icon={<VideoIcon
style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
<LinksListItem title='OSI Model Explained' subtitle='10 minutes' icon={<VideoIcon
style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
<LinksListItem title='Creating a React App' badgeText='pro' subtitle='15 minutes' icon={<VideoIcon
style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
<LinksListItem title='DOM vs Shadow DOM vs Virtual DOM' badgeText='pro' subtitle='15 minutes'
icon={<VideoIcon
style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
<LinksListItem title='Everything you need to know about HTTP caching' badgeText='pro' subtitle='10 minutes'
icon={<VideoIcon
style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
<LinksListItem title='Content Delivery Networks' subtitle='5 minutes' icon={<VideoIcon
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>

38
pages/watch/components/video-list-item.tsx
Unescape View File

@ -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>
);
}
Write Preview
Loading…
Cancel
Save