Add sysadmin roadmap

components/roadmap/home-roadmap-item.tsx

@@ -1,10 +1,11 @@
-import { Box, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
+import { Box, Flex, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
 import { InfoIcon } from '@chakra-ui/icons';
 
 type RoadmapGridItemProps = {
   title: string;
   subtitle: string;
   isCommunity?: boolean;
+  isUpcoming?: boolean;
   colorIndex?: number;
   url: string;
 };
@@ -14,12 +15,17 @@ const bgColorList = [
   'red.800',
   'green.800',
   'teal.800',
-  'gray.800',
+  'blue.800',
+  'red.900',
+  'gray.900',
+  'orange.900',
+  'yellow.900',
+  'green.900',
   'red.900'
 ];
 
 export function HomeRoadmapItem(props: RoadmapGridItemProps) {
-  const { title, subtitle, isCommunity, colorIndex = 0, url } = props;
+  const { title, subtitle, isCommunity, colorIndex = 0, url, isUpcoming } = props;
 
   return (
     <Box
@@ -42,6 +48,23 @@ export function HomeRoadmapItem(props: RoadmapGridItemProps) {
 
       <Heading fontSize={['17px', '17px', '22px']} mb='5px'>{title}</Heading>
       <Text color='gray.200' fontSize={['13px']}>{subtitle}</Text>
+
+      {isUpcoming && (
+        <Flex
+          alignItems='center'
+          justifyContent='center'
+          pos='absolute'
+          left={0}
+          right={0}
+          top={0}
+          bottom={0}
+          rounded='10px'
+        >
+          <Text color='white' bg='yellow.900' zIndex={1} fontWeight={600} p={'5px 10px'}
+                rounded='10px'>Upcoming</Text>
+          <Box bg={'black'} pos='absolute' top={0} left={0} right={0} bottom={0} rounded={'10px'} opacity={0.5} />
+        </Flex>
+      )}
     </Box>
   );
 }