gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor roadmap header

Browse Source
This commit is contained in:
Kamran Ahmed
2021-12-07 13:10:17 +01:00
parent 6eba4a2afd
commit 82456021ad
1 changed files with 76 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
components/roadmap/roadmap-page-header.tsx
View File

@ -1,48 +1,92 @@
import { RoadmapType } from '../../lib/roadmap'; import { RoadmapType } from '../../lib/roadmap';
import { NewAlertBanner } from './new-alert-banner'; import { NewAlertBanner } from './new-alert-banner';
import { Button, Link, Stack, Tab, TabList, Tabs, Text } from '@chakra-ui/react'; import {
Box,
Button,
Container,
Heading,
Link,
Stack,
Text,
} from '@chakra-ui/react';
import { AtSignIcon, DownloadIcon } from '@chakra-ui/icons'; import { AtSignIcon, DownloadIcon } from '@chakra-ui/icons';
import { PageHeader } from '../page-header';
import React from 'react'; import React from 'react';
type RoadmapPageHeaderType = { type RoadmapPageHeaderType = {
roadmap: RoadmapType; roadmap: RoadmapType;
} };
export function RoadmapPageHeader(props: RoadmapPageHeaderType) { export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
const { roadmap } = props; const { roadmap } = props;
return ( return (
<PageHeader <Box
beforeTitle={<NewAlertBanner />} pt={['25px', '20px', '45px']}
title={roadmap.title} pb={['20px', '15px', '30px']}
subtitle={roadmap.description} borderBottomWidth={1}
mb="30px"
> >
<Stack mt='20px' isInline> <Container maxW="container.md" position="relative">
<Button d={['flex', 'flex']} as={Link} href={'/roadmaps'} size='xs' py='14px' px='10px' <NewAlertBanner />
colorScheme='teal' variant='solid' _hover={{ textDecoration: 'none' }}> <Heading
&larr; <Text as='span' d={['none', 'inline']} ml='5px'>All Roadmaps</Text> as="h1"
</Button> color="black"
fontSize={['28px', '33px', '40px']}
{roadmap.pdfUrl && ( fontWeight={700}
<Button as={Link} mb={['2px', '2px', '5px']}
href={roadmap.pdfUrl} >
target='_blank' {roadmap.title}
size='xs' </Heading>
py='14px' <Text fontSize={['13px', '14px', '15px']}>{roadmap.description}</Text>
px='10px' <Stack mt="20px" isInline>
leftIcon={<DownloadIcon />} <Button
colorScheme='yellow' d={['flex', 'flex']}
variant='solid' as={Link}
_hover={{ textDecoration: 'none' }}> href={'/roadmaps'}
Download 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> </Button>
)}
<Button as={Link} href={'/signup'} size='xs' py='14px' px='10px' leftIcon={<AtSignIcon />} {roadmap.pdfUrl && (
colorScheme='yellow' variant='solid' _hover={{ textDecoration: 'none' }}> <Button
Subscribe as={Link}
</Button> href={roadmap.pdfUrl}
</Stack> target="_blank"
</PageHeader> 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>
</Container>
</Box>
); );
} }