info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-22 08:53:01 +02:00
Code Issues Releases Wiki Activity

Add TNS banner on FE, BE and DevOps roadmaps

Browse Source
This commit is contained in:
Kamran Ahmed
2022-12-26 20:58:35 +04:00
parent 09478a8ac8
commit e3ae882cbc
2 changed files with 31 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,7 +19,7 @@ import {
Text, Text,
useDisclosure useDisclosure
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { AtSignIcon, ChatIcon, DownloadIcon } from '@chakra-ui/icons'; import { AtSignIcon, ChatIcon, DownloadIcon, ExternalLinkIcon } from '@chakra-ui/icons';
import React from 'react'; import React from 'react';
import { SIGNUP_EMAIL_INPUT_NAME, SIGNUP_FORM_ACTION } from '../../pages/signup'; import { SIGNUP_EMAIL_INPUT_NAME, SIGNUP_FORM_ACTION } from '../../pages/signup';
import { event } from '../../lib/gtag'; import { event } from '../../lib/gtag';
@@ -139,12 +139,14 @@ function RoadmapSubscriber({ roadmapTitle }: { roadmapTitle: string }) {
export function RoadmapPageHeader(props: RoadmapPageHeaderType) { export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
const { roadmap } = props; const { roadmap } = props;
const hasTNSAlert = ['frontend', 'backend', 'devops'].includes(roadmap.id);
return ( return (
<Box <Box
pt={['25px', '20px', '45px']} pt={['25px', '20px', '45px']}
pb={['20px', '15px', '30px']} pb={['20px', '15px', '30px']}
borderBottomWidth={1} borderBottomWidth={1}
mb='30px' mb='50px'
> >
<Container maxW='container.md' position='relative'> <Container maxW='container.md' position='relative'>
<NewAlertBanner /> <NewAlertBanner />
@@ -198,13 +200,24 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
</Stack> </Stack>
</Flex> </Flex>
{isInteractiveRoadmap(roadmap.id) && ( {isInteractiveRoadmap(roadmap.id) && (
<Box mt='30px' mb={hasTNSAlert ? ['-53px', '-48px', '-63px'] : ['-37px', '-32px', '-47px']} borderWidth={1} rounded='3px'>
{ hasTNSAlert && (
<Text
fontWeight={500}
fontSize='14px'
bg='gray.100'
p='5px 7px'
rounded='2px 2px 0 0'
borderBottomWidth={1}
>
<Box as='span' display={['none', 'none', 'inline']}>Get the latest { roadmap.featuredTitle } news from our sister site&nbsp;<Link href={'https://thenewstack.io?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Banner'} target='_blank' textDecoration='underline' fontWeight={600}>TheNewStack.io <ExternalLinkIcon /></Link></Box>
<Box as='span' display={['inline', 'inline', 'none']}>Get latest { roadmap.featuredTitle } news on &nbsp;<Link href={'https://thenewstack.io?utm_source=roadmap-sh&utm_medium=Referral&utm_campaign=Banner'} target={'_blank'} textDecoration='underline' fontWeight={600}>TheNewStack.io <ExternalLinkIcon /></Link></Box>
</Text>
)}
<Text <Text
mt='30px'
mb={['-37px', '-32px', '-47px']}
fontWeight={500} fontWeight={500}
fontSize='14px' fontSize='14px'
bg='white' bg='white'
borderWidth={1}
p='5px 7px' p='5px 7px'
rounded='3px' rounded='3px'
> >
@@ -213,6 +226,7 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
</Badge> </Badge>
Resources are here, try clicking any nodes. Resources are here, try clicking any nodes.
</Text> </Text>
</Box>
)} )}
</Container> </Container>
</Box> </Box>

1
pages/[roadmap]/index.tsx
View File

@@ -18,7 +18,6 @@ import { SIGNUP_EMAIL_INPUT_NAME, SIGNUP_FORM_ACTION } from '../signup';
import { BellIcon, EmailIcon } from '@chakra-ui/icons'; import { BellIcon, EmailIcon } from '@chakra-ui/icons';
import { RelatedRoadmaps } from '../../components/related-roadmaps'; import { RelatedRoadmaps } from '../../components/related-roadmaps';
import { TeamsBanner } from '../../components/teams-banner'; import { TeamsBanner } from '../../components/teams-banner';
import { ShareIcons } from '../../components/share-icons';
type RoadmapProps = { type RoadmapProps = {
roadmap: RoadmapType; roadmap: RoadmapType;