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

Make the guides page working

Browse Source
This commit is contained in:
Kamran Ahmed
2021-09-03 09:45:46 +02:00
parent fc159ecb9b
commit 93797cc5ee
12 changed files with 160 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
components/content-page-header.tsx
View File

@ -1,28 +1,55 @@
import { Box, Container, Flex, Heading, Image, Link, Text } from '@chakra-ui/react';
import React from 'react';
type GuideHeaderProps = {
type ContentPageHeaderProps = {
formattedDate: string;
title: string;
subtitle: string;
author?: {
name: string;
twitter: string;
picture: string;
},
subLink?: {
text: string;
url: string;
}
};
export function ContentPageHeader(props: GuideHeaderProps) {
const { title, subtitle } = props;
export function ContentPageHeader(props: ContentPageHeaderProps) {
const { title, subtitle, author = null, formattedDate, subLink = null } = props;
return (
<Box pt={['35px', '35px', '70px']} pb={['35px', '35px', '55px']} borderBottomWidth={1} mb='30px'>
<Container maxW='container.md' position='relative' textAlign={['left', 'left', 'center']}>
<Flex alignItems='center' justifyContent={['flex-start', 'flex-start', 'center']} fontSize={['12px', '12px', '14px']}>
<Flex alignItems='center' justifyContent={['flex-start', 'flex-start', 'center']}
fontSize={['12px', '12px', '14px']}>
<Link d={['none', 'flex', 'flex']} href='#' alignItems='center' fontWeight={600} color='gray.500'>
<Image mr='7px' w='22px' src='https://github.com/kamranahmedse.png' />
Kamran Ahmed
</Link>
<Text d={['none', 'inline', 'inline']} mx='7px' color='gray.500' as='span'>&middot;</Text>
{author?.name && (
<>
<Link
d={['none', 'flex', 'flex']}
target='_blank'
href={`https://twitter.com/${author.twitter}`}
alignItems='center'
fontWeight={600}
color='gray.500'
>
<Image rounded={'full'} mr='7px' w='22px' src={author.picture} />
{author.name}
</Link>
<Text d={['none', 'inline', 'inline']} mx='7px' color='gray.500' as='span'>&middot;</Text>
</>
)}
<Text color='gray.500' as='span'>Monday, May 4, 2021</Text>
<Text d={['none', 'none', 'inline']} mx='7px' color='gray.500' as='span'>&middot;</Text>
<Link d={['none', 'none', 'inline']} color='blue.500' fontWeight={500} href='#'>Improve this Guide</Link>
<Text color='gray.500' as='span'>{formattedDate}</Text>
{subLink?.text && (
<>
<Text d={['none', 'none', 'inline']} mx='7px' color='gray.500' as='span'>&middot;</Text>
<Link d={['none', 'none', 'inline']} color='blue.500' fontWeight={500}
href={subLink.url} target={'_blank'}>{subLink.text}</Link>
</>
)}
</Flex>
<Heading as='h1' color='black' fontSize={['30px', '30px', '45px']} lineHeight={['40px', '40px', '53px']}
fontWeight={700} my={['5px', '5px', '10px']}>{title}</Heading>