Refactor page components

2021-09-05 17:26:54 +02:00
parent d5b091a5ed
commit f03472127c
11 changed files with 23 additions and 23 deletions
--- a/components/roadmap/roadmap-grid-item.tsx
+++ b/components/roadmap/roadmap-grid-item.tsx
@ -0,0 +1,89 @@
+import { Badge, Box, Flex, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
+import { InfoIcon } from '@chakra-ui/icons';
+
+type RoadmapGridItemProps = {
+  title: string;
+  subtitle: string;
+  href: string;
+  isCommunity?: boolean;
+  isUpcoming?: boolean;
+  colorIndex?: number;
+};
+
+const bgColorList = [
+  'gray.900',
+  'purple.900',
+  'blue.900',
+  'red.900',
+  'green.900',
+  'teal.900',
+  'yellow.900',
+  'cyan.900',
+  'pink.900',
+
+  'gray.800',
+  'purple.800',
+  'blue.800',
+  'red.800',
+  'green.800',
+  'teal.800',
+  'yellow.800',
+  'cyan.800',
+  'pink.800',
+
+  'gray.700',
+  'purple.700',
+  'blue.700',
+  'red.700',
+  'green.700',
+  'teal.700',
+  'yellow.700',
+  'cyan.700',
+  'pink.700',
+
+  'gray.600',
+  'purple.600',
+  'blue.600',
+  'red.600',
+  'green.600',
+  'teal.600',
+  'yellow.600',
+  'cyan.600',
+  'pink.600'
+];
+
+export function RoadmapGridItem(props: RoadmapGridItemProps) {
+  const { title, subtitle, isCommunity = false, isUpcoming = false, colorIndex = 0, href = '/' } = props;
+
+  return (
+    <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={href} shadow='xl' p='20px'
+          rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1} pos='relative'>
+
+      {isCommunity && (
+        <Tooltip label={'Community contribution'} hasArrow placement='top'>
+          <InfoIcon opacity={0.5} color='gray.100' position='absolute' top='10px' right='10px' />
+        </Tooltip>
+      )}
+
+      <Heading color='white' mb={'6px'} fontSize='20px'>{title}</Heading>
+      <Text color='gray.300' fontSize='14px'>{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>
+  );
+}