gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change homepage roadmap items interaction

Browse Source
This commit is contained in:
Kamran Ahmed
2021-12-08 18:59:56 +01:00
parent 0c3ea386f5
commit b25111415f
2 changed files with 54 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
components/roadmap/home-roadmap-item.tsx
View File

@ -21,11 +21,18 @@ const bgColorList = [
'teal.200',
'yellow.100',
'green.200',
'red.200'
'red.200',
];
export function HomeRoadmapItem(props: RoadmapGridItemProps) {
const { title, subtitle, isCommunity, colorIndex = 0, url, isUpcoming } = props;
const {
title,
subtitle,
isCommunity,
colorIndex = 0,
url,
isUpcoming,
} = props;
return (
<Box
@ -33,49 +40,73 @@ export function HomeRoadmapItem(props: RoadmapGridItemProps) {
href={url}
_hover={{
textDecoration: 'none',
transform: 'scale(1.02)',
opacity: '1 !important'
bg: 'rgba(255,255,255,.10)'
}}
sx={{
// On mobile devices, don't change the scale
'@media (hover: none)': {
'&:hover': {
transform: 'scale(1)'
}
}
transform: 'scale(1)',
},
},
}}
flex={1}
shadow='2xl'
shadow="2xl"
className={'home-roadmap-item'}
bg={'rgba(255,255,255,.05)'}
color='white'
p='15px'
rounded='10px'
pos='relative'
color="white"
p="15px"
rounded="10px"
pos="relative"
>
{isCommunity && (
<Tooltip label={'Community contribution'} hasArrow placement='top'>
<InfoIcon opacity={0.5} position='absolute' top='10px' right='10px' />
<Tooltip label={'Community contribution'} hasArrow placement="top">
<InfoIcon opacity={0.5} position="absolute" top="10px" right="10px" />
</Tooltip>
)}
<Heading fontSize={['17px', '17px', '22px']} color={bgColorList[colorIndex]} mb='5px'>{title}</Heading>
<Text color='gray.200' fontSize={['13px']}>{subtitle}</Text>
<Heading
fontSize={['17px', '17px', '22px']}
color={bgColorList[colorIndex]}
mb="5px"
>
{title}
</Heading>
<Text color="gray.200" fontSize={['13px']}>
{subtitle}
</Text>
{isUpcoming && (
<Flex
alignItems='center'
justifyContent='center'
pos='absolute'
alignItems="center"
justifyContent="center"
pos="absolute"
left={0}
right={0}
top={0}
bottom={0}
rounded='10px'
rounded="10px"
>
<Text color='white' bg='gray.600' 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} />
<Text
color="white"
bg="gray.600"
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>