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

Refactor page header

Browse Source
This commit is contained in:
Kamran Ahmed 2021-08-15 16:07:05 +02:00
parent 51a5f570fe
commit ef6709d2bf
2 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/page-header.tsx Normal file
View File

@ -0,0 +1,19 @@
import { Box, Container, Heading, Text } from '@chakra-ui/react';
type PageHeaderProps = {
title: string;
subtitle: string;
};
export function PageHeader(props: PageHeaderProps) {
const { title, subtitle } = props;
return (
<Box pt='45px' pb='30px' borderBottomWidth={1} mb='30px'>
<Container maxW='container.md' position='relative'>
<Heading as='h1' color='black' fontSize='35px' fontWeight={700} mb='5px'>{title}</Heading>
<Text fontSize='15px'>{subtitle}</Text>
</Container>
</Box>
);
}

13
pages/guides/index.tsx
View File

@ -6,19 +6,18 @@ import { OpensourceBanner } from '../../components/opensource-banner';
import { UpdatesBanner } from '../../components/updates-banner';
import { Footer } from '../../components/footer';
import { GuideGridItem } from './components/guide-grid-item';
import { PageHeader } from '../../components/page-header';
export default function Guides() {
return (
<Box bg='white' minH='100vh'>
<Header />
<Box mb='60px'>
<Box pt='45px' pb='30px' borderBottomWidth={1}>
<Container maxW='container.md' position='relative'>
<Heading as='h1' color='black' fontSize='35px' fontWeight={700} mb='5px'>Visual Guides</Heading>
<Text fontSize='15px'>Succinct graphical explanations to development related topics.</Text>
</Container>
</Box>
<Container maxW='container.md' position='relative' mt='30px'>
<PageHeader
title={'Visual Guides'}
subtitle={'Succinct graphical explanations to development related topics.'}
/>
<Container maxW='container.md' position='relative'>
<Stack isInline mb='30px' spacing='15px'>
<GuideGridItem
title='Session Based Authentication'