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.

49 lines
1.6 KiB

import { RoadmapType } from '../../lib/roadmap';
import { NewAlertBanner } from './new-alert-banner';
import { Button, Link, Stack, Text } from '@chakra-ui/react';
import { AtSignIcon, DownloadIcon } from '@chakra-ui/icons';
import { PageHeader } from '../page-header';
import React from 'react';
type RoadmapPageHeaderType = {
roadmap: RoadmapType;
}
export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
const { roadmap } = props;
return (
<PageHeader
beforeTitle={<NewAlertBanner />}
title={roadmap.title}
subtitle={roadmap.description}
>
<Stack mt='20px' isInline>
<Button d={['flex', 'flex']} as={Link} href={'/roadmaps'} size='xs' py='14px' px='10px'
colorScheme='teal' variant='solid' _hover={{ textDecoration: 'none' }}>
&larr; <Text as='span' d={['none', 'inline']} ml='5px'>All Roadmaps</Text>
</Button>
{roadmap.pdfUrl && (
<Button as={Link}
href={roadmap.pdfUrl}
target='_blank'
size='xs'
py='14px'
px='10px'
leftIcon={<DownloadIcon />}
colorScheme='yellow'
variant='solid'
_hover={{ textDecoration: 'none' }}>
Download
</Button>
)}
<Button as={Link} href={'/signup'} size='xs' py='14px' px='10px' leftIcon={<AtSignIcon />}
colorScheme='yellow' variant='solid' _hover={{ textDecoration: 'none' }}>
Subscribe
</Button>
</Stack>
</PageHeader>
);
}