info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-02-23 19:13:19 +01:00
Code Issues Releases Wiki Activity

Add guide header and guide page

Browse Source
This commit is contained in:
Kamran Ahmed 2021-08-20 15:49:34 +02:00
parent 4737dd8390
commit a85497d7e7
2 changed files with 57 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/guide-header.tsx Normal file
View File

@ -0,0 +1,30 @@
import { Box, Container, Flex, Heading, Image, Link, Text } from '@chakra-ui/react';
import React from 'react';
type GuideHeaderProps = {
title: string;
subtitle: string;
};
export function GuideHeader(props: GuideHeaderProps) {
const { title, subtitle } = props;
return (
<Box pt='70px' pb='55px' borderBottomWidth={1} mb='30px' textAlign='center' position='static' top='10px'>
<Container maxW='container.md' position='relative' textAlign='center'>
<Flex alignItems='center' justifyContent='center' fontSize='14px'>
<Link href='#' d='flex' alignItems='center' fontWeight={600} color='gray.500'>
<Image mr='7px' w='22px' src='https://github.com/kamranahmedse.png' />
Kamran Ahmed
</Link>
<Text mx='7px' color='gray.500' as='span'>&middot;</Text>
<Text color='gray.500' as='span'>Monday, May 4, 2021</Text>
<Text mx='7px' color='gray.500' as='span'>&middot;</Text>
<Link color='blue.500' fontWeight={500} href='#'>Improve this Guide</Link>
</Flex>
<Heading as='h1' color='black' fontSize='45px' fontWeight={700} my='10px'>{title}</Heading>
<Text fontSize='16px' color='gray.700'>{subtitle}</Text>
</Container>
</Box>
);
}

27
pages/guides/[guide].tsx Normal file
View File

@ -0,0 +1,27 @@
import { Box, Container } from '@chakra-ui/react';
import { Header } from '../../components/header';
import { OpensourceBanner } from '../../components/opensource-banner';
import { UpdatesBanner } from '../../components/updates-banner';
import { Footer } from '../../components/footer';
import { GuideHeader } from '../../components/guide-header';
export default function Guide() {
return (
<Box bg='white' minH='100vh'>
<Header />
<Box mb='60px'>
<GuideHeader
title={'Build it and they will come?'}
subtitle={'Why “build it and they will come” alone won’t work anymore'}
/>
<Container maxW={'container.md'} position='relative'>
</Container>
</Box>
<OpensourceBanner />
<UpdatesBanner />
<Footer />
</Box>
);
}