Interactive frontend roadmap with contribution links

components/md-renderer/mdx-components/badge-link.tsx

@@ -5,16 +5,18 @@ type BadgeLinkType = {
   target: string;
   badgeText: string;
   href: string;
+  colorScheme?: string;
   children: React.ReactNode
 };
 
 export function BadgeLink(props: BadgeLinkType) {
-  const { target = '_blank', badgeText, href, children } = props;
+  const { target = '_blank', colorScheme='purple', badgeText, href, children } = props;
 
   return (
     <Text mb={0}>
-      <Link fontWeight={500} textDecoration='underline' href={href} target={target}>
-        <Badge colorScheme={'purple'} style={{ position: 'relative', top: '-2px' }}>{badgeText}</Badge> {children}
+      <Link color='blue.700' fontWeight={500} textDecoration='none' href={href} target={target} _hover={{ textDecoration: 'none', color: 'purple.400' }}>
+        <Badge mr='10px' colorScheme={colorScheme} pos='relative' top='-2px'>{badgeText}</Badge>
+        {children}
       </Link>
     </Text>
   );

components/roadmap/edit-content-page-link.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Box, Button, Divider, Link, Text } from '@chakra-ui/react';
+
+type EditContentPageLinkProps = {
+  href: string;
+};
+
+export function EditContentPageLink(props: EditContentPageLinkProps) {
+  const { href } = props;
+
+  return (
+    <Box my='30px'>
+      <Divider mb="15px" orientation="horizontal" />
+      <Text
+        lineHeight="23px"
+        fontWeight={500}
+        fontSize="14px"
+        color="gray.500"
+        mb="10px"
+      >
+        This page is a work in progress. Help us by writing a small
+        introduction to the topic and suggesting a few links to read more
+        about this topic.
+      </Text>
+      <Button
+        size="sm"
+        py="20px"
+        as={Link}
+        href={href}
+        target="_blank"
+        isFullWidth
+        colorScheme={'purple'}
+        _hover={{ textDecoration: 'none' }}
+      >
+        Edit this Page
+      </Button>
+    </Box>
+  );
+}

components/roadmap/roadmap-page-header.tsx

@@ -1,6 +1,6 @@
 import { RoadmapType } from '../../lib/roadmap';
 import { NewAlertBanner } from './new-alert-banner';
-import { Button, Link, Stack, Text } from '@chakra-ui/react';
+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';