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

Refactor roadmap component

Browse Source
pull/1331/head
Kamran Ahmed 3 years ago
parent d80327c8e8
commit c8395aa3df
2 changed files with 53 additions and 39 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. 46
      pages/index.tsx
  2. 46
      pages/roadmaps/components/roadmap-grid-item.tsx

46
pages/index.tsx
Unescape View File

@ -7,6 +7,7 @@ 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';
export default function Home() {
return (
@ -27,45 +28,12 @@ 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'>
<Link as={Box} href={'#'} _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} flex={1} shadow='2xl'
bg='blue.900' color='white' p='15px' rounded='10px'>
<Heading fontSize='22px' mb='5px'>Frontend</Heading>
<Text color='gray.200' fontSize='13px'>Step by step guide to becoming a frontend developer in 2021</Text>
</Link>
<Link as={Box} href='#' _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} flex={1} shadow='2xl'
bg='red.800' color='white' p='15px' rounded='10px'>
<Heading fontSize='22px' mb='5px'>Backend</Heading>
<Text color='gray.200' fontSize='13px'>Step by step guide to becoming a backend developer in 2021</Text>
</Link>
<Link as={Box} href='#' _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} flex={1} shadow='2xl'
bg='green.800' color='white' p='15px' rounded='10px'>
<Heading fontSize='22px' mb='5px'>DevOps</Heading>
<Text color='gray.200' fontSize='13px'>Step by step guide for DevOps or Operations role in 2021</Text>
</Link>
<Link as={Box} href='#' _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} flex={1} shadow='2xl'
bg='teal.800' color='white' p='15px' rounded='10px'>
<Heading fontSize='22px' mb='5px'>React</Heading>
<Text color='gray.200' fontSize='13px'>Step by step guide for DevOps or Operations role in 2021</Text>
</Link>
<Link as={Box} href='#' _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} flex={1} shadow='2xl'
bg='gray.800' color='white' p='15px' rounded='10px'>
<Heading fontSize='22px' mb='5px'>DBA</Heading>
<Text color='gray.200' fontSize='13px'>Step by step guide for DevOps or Operations role in 2021</Text>
</Link>
<Link as={Box} href={'#'} _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} flex={1}
shadow='2xl'
bg='red.900' color='white' p='15px' rounded='10px' position='relative'>
<Tooltip label={'Community contribution'} hasArrow placement='top'>
<InfoIcon opacity={0.5} position='absolute' top='10px' right='10px' />
</Tooltip>
<Heading fontSize='22px' mb='5px'>Android</Heading>
<Text color='gray.200' fontSize='13px'>Step by step guide for DevOps or Operations role in 2021</Text>
</Link>
<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>

46
pages/roadmaps/components/roadmap-grid-item.tsx
Unescape View File

@ -0,0 +1,46 @@
import { Box, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
import { InfoIcon } from '@chakra-ui/icons';
type RoadmapGridItemProps = {
title: string;
subtitle: string;
isCommunity?: boolean;
colorIndex?: number
};
const bgColorList = [
'blue.900',
'red.800',
'green.800',
'teal.800',
'gray.800',
'red.900'
];
export function RoadmapGridItem(props: RoadmapGridItemProps) {
const { title, subtitle, isCommunity, colorIndex = 0 } = props;
return (
<Link
as={Box}
href={'#'}
_hover={{ textDecoration: 'none', transform: 'scale(1.02)' }}
flex={1}
shadow='2xl'
bg={bgColorList[colorIndex] ?? bgColorList[0]}
color='white'
p='15px'
rounded='10px'
pos='relative'
>
{isCommunity && (
<Tooltip label={'Community contribution'} hasArrow placement='top'>
<InfoIcon opacity={0.5} position='absolute' top='10px' right='10px' />
</Tooltip>
)}
<Heading fontSize='22px' mb='5px'>{title}</Heading>
<Text color='gray.200' fontSize='13px'>{subtitle}</Text>
</Link>
);
}
Write Preview
Loading…
Cancel
Save