info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-02 13:52:46 +02:00
Code Issues Releases Wiki Activity

Remove date from guide detail page

Browse Source
This commit is contained in:
Kamran Ahmed
2022-09-19 15:33:12 +04:00
parent 1a5efc1d06
commit c8242f5f13
3 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/guide/guide-grid-item.tsx
View File

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

2
pages/guides/[guide].tsx
View File

@@ -27,7 +27,7 @@ export default function Guide(props: GuideProps) {
<ContentPageHeader <ContentPageHeader
title={guide.title} title={guide.title}
subtitle={guide.description} subtitle={guide.description}
formattedDate={guide.formattedUpdatedAt!} formattedDate={`${guide?.type?.charAt(0).toUpperCase()}${guide?.type?.slice(1)} Guide`}
author={{ author={{
twitter: guide?.author?.twitter!, twitter: guide?.author?.twitter!,
picture: guide?.author?.picture!, picture: guide?.author?.picture!,

3
pages/guides/index.tsx
View File

@@ -41,6 +41,7 @@ export default function Guides(props: GuidesProps) {
subtitle={recentGuide.description} subtitle={recentGuide.description}
date={recentGuide.formattedUpdatedAt!} date={recentGuide.formattedUpdatedAt!}
isNew={false} isNew={false}
type={recentGuide.type}
colorIndex={counter} colorIndex={counter}
/> />
))} ))}
@@ -53,7 +54,7 @@ export default function Guides(props: GuidesProps) {
key={oldGuide.id} key={oldGuide.id}
title={oldGuide.title} title={oldGuide.title}
badgeText={oldGuide.isNew ? 'NEW' : ''} badgeText={oldGuide.isNew ? 'NEW' : ''}
subtitle={oldGuide.formattedUpdatedAt!} subtitle={`${oldGuide?.type?.charAt(0).toUpperCase()}${oldGuide?.type?.slice(1)}`}
/> />
))} ))}
</LinksList> </LinksList>