Menu and guides listing changes

pull/1331/head
Kamran Ahmed 3 years ago
parent aa8aea9433
commit 75c4f952dd
  1. 72
      components/global-header.tsx
  2. 4
      components/page-header.tsx
  3. 9
      pages/guides/components/guide-grid-item.tsx
  4. 3
      pages/guides/index.tsx

@ -1,17 +1,7 @@
import {
Box,
Container,
Flex,
IconButton,
Image,
Link,
Menu,
MenuButton, MenuItem,
MenuList,
Stack,
Text
} from '@chakra-ui/react';
import { Box, CloseButton, Container, Flex, IconButton, Image, Link, Stack, Text } from '@chakra-ui/react';
import { HamburgerIcon } from '@chakra-ui/icons';
import { useState } from 'react';
import siteConfig from '../content/site.json';
type MenuLinkProps = {
text: string;
@ -48,27 +38,49 @@ function DesktopMenuLinks() {
}
function MobileMenuLinks() {
const [isOpen, setIsOpen] = useState(false);
return (
<Menu autoSelect={false}>
<MenuButton
<>
<IconButton
rounded='5px'
padding={0}
aria-label={'Menu'}
d={['block', 'none', 'none']}
as={HamburgerIcon}
aria-label='Options'
variant='outline'
color='white' w='22px' height='22px'
icon={<HamburgerIcon color='white' w='25px' height='25px' />}
color='white'
cursor='pointer'
h='auto'
bg='transparent'
_hover={{ bg: 'transparent' }}
_active={{ bg: 'transparent' }}
_focus={{ bg: 'transparent' }}
onClick={() => setIsOpen(true)}
/>
<MenuList py={'4px'} rounded='3px' minWidth='150px'>
<MenuItem href={'/roadmaps'} as={Link} py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
color='gray.600'>Roadmaps</MenuItem>
<MenuItem href={'/guides'} as={Link} py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
color='gray.600'>Guides</MenuItem>
<MenuItem href={'/watch'} as={Link} py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
color='gray.600'>Videos</MenuItem>
<MenuItem href='/signup' as={Link} py='4px' borderColor='gray.100' fontSize='13px'
color='gray.600'>Subscribe</MenuItem>
</MenuList>
</Menu>
{isOpen && (
<Stack color='gray.100'
fontSize={['22px', '22px', '22px', '32px']}
alignItems='center'
justifyContent='center'
pos='fixed'
left={0}
right={0}
bottom={0}
top={0}
bg='gray.900'
spacing='12px'
zIndex={1}
>
<Link href='/roadmaps'>Roadmaps</Link>
<Link href='/guides'>Guides</Link>
<Link href='/watch'>Videos</Link>
<Link target='_blank' href={siteConfig.url.youtube}>YouTube</Link>
<Link href='/signup'>Subscribe</Link>
<CloseButton onClick={() => setIsOpen(false)} pos='fixed' top='3px' right='15px' size='lg' />
</Stack>
)}
</>
);
}

@ -11,12 +11,12 @@ export function PageHeader(props: PageHeaderProps) {
const { title, subtitle, children } = props;
return (
<Box pt={['20px', '20px', '45px']} pb={['15px', '15px', '30px']} borderBottomWidth={1} mb='30px'>
<Box pt={['25px', '20px', '45px']} pb={['20px', '15px', '30px']} borderBottomWidth={1} mb='30px'>
<Container maxW='container.md' position='relative'>
<Heading
as='h1'
color='black'
fontSize={['25px', '25px', '40px']}
fontSize={['33px', '33px', '40px']}
fontWeight={700}
mb={['2px', '2px', '5px']}
>

@ -2,6 +2,7 @@ import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react';
type GuideGridItemProps = {
title: string;
href: string;
subtitle: string;
date: string;
isNew?: boolean;
@ -14,17 +15,17 @@ const bgColorList = [
];
export function GuideGridItem(props: GuideGridItemProps) {
const { title, subtitle, date, isNew = false, colorIndex = 0 } = props;
const { title, subtitle, date, isNew = false, colorIndex = 0, href } = props;
return (
<Link _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Box} href='#' shadow='xl' p='20px'
rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
<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}>
<Text mb='10px' fontSize='13px' color='gray.400'>
{isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}
{date}
</Text>
<Heading color='white' mb={'6px'} fontSize='20px'>{title}</Heading>
<Text color='gray.300' fontSize='14px'>{subtitle}</Text>
</Link>
</Box>
);
}

@ -25,12 +25,13 @@ export default function Guides(props: GuidesProps) {
<Box mb='60px'>
<PageHeader
title={'Visual Guides'}
subtitle={'Succinct graphical explanations to development related topics.'}
subtitle={'Succinct graphical explanations to engineering topics.'}
/>
<Container maxW='container.md' position='relative'>
<SimpleGrid columns={[1, 1, 2]} mb='30px' spacing={['10px', '10px', '15px']}>
{recentGuides.map((recentGuide, counter) => (
<GuideGridItem
href={recentGuide.url}
key={recentGuide.id}
title={recentGuide.title}
subtitle={recentGuide.description}

Loading…
Cancel
Save