Refactor roadmap page logic

components/roadmap/new-alert-banner.tsx

@@ -0,0 +1,50 @@
+import { Badge, Link, Text } from '@chakra-ui/react';
+import siteConfig from '../../content/site.json';
+import { event } from '../../lib/gtag';
+import React from 'react';
+
+export function NewAlertBanner() {
+  return (
+    <Text
+      _hover={{
+        textDecoration: 'none',
+        color: 'blue.700',
+        '& .new-badge': { bg: 'blue.700' },
+      }}
+      as={Link}
+      href={siteConfig.url.youtube}
+      d="block"
+      target="_blank"
+      color="red.700"
+      fontSize="sm"
+      mb="10px"
+      fontWeight={500}
+      onClick={() =>
+        event({
+          category: 'Subscription',
+          action: 'Clicked the YouTube banner',
+          label: 'YouTube Alert on Roadmap',
+        })
+      }
+    >
+      <Badge
+        transition={'all 300ms'}
+        className="new-badge"
+        mr="7px"
+        colorScheme="red"
+        variant="solid"
+      >
+        New
+      </Badge>
+      <Text textDecoration="underline" as="span" d={['none', 'inline']}>
+        Roadmap topics to be covered on our YouTube Channel
+      </Text>
+      <Text textDecoration="underline" as="span" d={['inline', 'none']}>
+        Topic videos being made on YouTube
+      </Text>
+      <Text as="span" ml="5px">
+        &raquo;
+      </Text>
+    </Text>
+  );
+}

components/roadmap/roadmap-page-header.tsx

@@ -0,0 +1,48 @@
+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>
+  );
+}