From ba21172d2002bf7bf5e801fe8de2d39a7f63f2f3 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Wed, 8 Dec 2021 14:47:05 +0100
Subject: [PATCH] Add interactive frontend roadmap version

---
 components/roadmap/roadmap-page-header.tsx | 19 ++++++++++++++++++-
 pages/[roadmap]/index.tsx                  |  2 +-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/components/roadmap/roadmap-page-header.tsx b/components/roadmap/roadmap-page-header.tsx
index 83ab2c1f0..856d606e1 100644
--- a/components/roadmap/roadmap-page-header.tsx
+++ b/components/roadmap/roadmap-page-header.tsx
@@ -1,6 +1,7 @@
 import { RoadmapType } from '../../lib/roadmap';
 import { NewAlertBanner } from './new-alert-banner';
 import {
+  Badge,
   Box,
   Button,
   Container,
@@ -12,7 +13,6 @@ import {
 } from '@chakra-ui/react';
 import { AtSignIcon, DownloadIcon } from '@chakra-ui/icons';
 import React from 'react';
-import { useRouter } from 'next/router';
 
 type RoadmapPageHeaderType = {
   roadmap: RoadmapType;
@@ -90,6 +90,23 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
             </Button>
           </Stack>
         </Flex>
+        {roadmap.id === 'frontend' && (
+          <Text
+            mt="30px"
+            mb="-47px"
+            fontWeight={500}
+            fontSize="14px"
+            bg="white"
+            borderWidth={1}
+            p="5px 7px"
+            rounded="3px"
+          >
+            <Badge pos="relative" top={'-1px'} mr="6px" colorScheme="yellow">
+              New
+            </Badge>
+            Roadmap is now interactive, try clicking any nodes
+          </Text>
+        )}
       </Container>
     </Box>
   );
diff --git a/pages/[roadmap]/index.tsx b/pages/[roadmap]/index.tsx
index 837cad25c..03d3b22be 100644
--- a/pages/[roadmap]/index.tsx
+++ b/pages/[roadmap]/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Container, Image } from '@chakra-ui/react';
+import { Box, Container, Image, Text } from '@chakra-ui/react';
 import { GlobalHeader } from '../../components/global-header';
 import { OpensourceBanner } from '../../components/opensource-banner';
 import { UpdatesBanner } from '../../components/updates-banner';