Add visual guides navigation
This commit is contained in:
Kamran Ahmed
1283
package-lock.json
generated
1283
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
20
pages/icons/text-icon.tsx
Normal file
20
pages/icons/text-icon.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
21
pages/icons/video-icon.tsx
Normal file
21
pages/icons/video-icon.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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
|
||||
Authentication</Text>
|
||||
<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'>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
|
||||
SSH</Text>
|
||||
<Text d='flex' alignItems='center' transition='200ms' className={'guide-title'} fontWeight={500}
|
||||
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'>→</Text>
|
||||
View all Guides <Text d='inline-block' as='span' transition='200ms'
|
||||
className='forward-arrow'>→</Text>
|
||||
</Link>
|
||||
</Stack>
|
||||
</Container>
|
||||
|
||||
Reference in New Issue
Block a user