Roadmap to becoming a developer in 2022
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

38 lines
971 B

import { Box, Container, Heading, Text } from '@chakra-ui/react';
3 years ago
import React from 'react';
type PageHeaderProps = {
title: string;
subtitle: string;
3 years ago
children?: React.ReactNode;
beforeTitle?: React.ReactNode;
};
export function PageHeader(props: PageHeaderProps) {
const { title, subtitle, children, beforeTitle = null } = props;
return (
<Box pt={['25px', '20px', '45px']} pb={['20px', '15px', '30px']} borderBottomWidth={1} mb='30px'>
<Container maxW='container.md' position='relative'>
{beforeTitle}
<Heading
as='h1'
color='black'
fontSize={['28px', '33px', '40px']}
fontWeight={700}
mb={['2px', '2px', '5px']}
>
{title}
</Heading>
<Text fontSize={['13px', '14px', '15px']}>{subtitle}</Text>
</Container>
3 years ago
{children && (
<Container maxW='container.md'>
{children}
</Container>
)}
</Box>
);
}