import { RoadmapType } from '../../lib/roadmap'; import { NewAlertBanner } from './new-alert-banner'; import { Button, Link, Stack, Tab, TabList, Tabs, 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' }}> ← <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> ); }