fix: hide the year of most recent posts on the landing page

This commit is contained in:
Hossein Mehrabi 2023-08-24 20:55:50 +03:30
parent 187c6de312
commit 563ae6db2e
No known key found for this signature in database
GPG Key ID: 45C04964191AFAA1
4 changed files with 19 additions and 2 deletions

View File

@ -7,9 +7,15 @@ import PostType = LPE.PostType
export type Props = React.ComponentProps<typeof Container> & { export type Props = React.ComponentProps<typeof Container> & {
contentType: PostType contentType: PostType
date: Date | null date: Date | null
displayYear?: boolean
} }
export const PostCardLabel: FC<Props> = ({ contentType, date, ...props }) => { export const PostCardLabel: FC<Props> = ({
displayYear = true,
contentType,
date,
...props
}) => {
return ( return (
<Container {...props}> <Container {...props}>
<Typography variant="body3" genericFontFamily="sans-serif"> <Typography variant="body3" genericFontFamily="sans-serif">
@ -23,7 +29,11 @@ export const PostCardLabel: FC<Props> = ({ contentType, date, ...props }) => {
date.toLocaleString('en-GB', { date.toLocaleString('en-GB', {
day: 'numeric', day: 'numeric',
month: 'long', // TODO: Should be uppercase month: 'long', // TODO: Should be uppercase
year: 'numeric', ...(displayYear
? {
year: 'numeric',
}
: {}),
})} })}
</Typography> </Typography>
</Container> </Container>

View File

@ -41,6 +41,7 @@ export type PostCardProps = CommonProps &
size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'
applySizeStyles?: boolean applySizeStyles?: boolean
displayPodcastShow?: boolean displayPodcastShow?: boolean
displayYear?: boolean
} }
export const PostCard = (_props: PostCardProps) => { export const PostCard = (_props: PostCardProps) => {
@ -60,6 +61,7 @@ export const PostCard = (_props: PostCardProps) => {
contentType, contentType,
applySizeStyles = true, applySizeStyles = true,
displayPodcastShow = true, displayPodcastShow = true,
displayYear = true,
...props ...props
} = _props } = _props
@ -81,6 +83,7 @@ export const PostCard = (_props: PostCardProps) => {
<PostCardLabel <PostCardLabel
className="post-card__label" className="post-card__label"
contentType={contentType} contentType={contentType}
displayYear={displayYear}
date={date} date={date}
/> />
) )

View File

@ -13,6 +13,7 @@ export type PostsGridProps = Partial<React.ComponentProps<typeof Container>> & {
shows?: LPE.Podcast.Show[] shows?: LPE.Podcast.Show[]
posts?: LPE.Post.Document[] posts?: LPE.Post.Document[]
displayPodcastShow?: boolean displayPodcastShow?: boolean
displayYear?: boolean
} }
export const PostsGrid: React.FC<PostsGridProps> = ({ export const PostsGrid: React.FC<PostsGridProps> = ({
@ -23,6 +24,7 @@ export const PostsGrid: React.FC<PostsGridProps> = ({
bordered = false, bordered = false,
horizontal = false, horizontal = false,
displayPodcastShow = true, displayPodcastShow = true,
displayYear = true,
...props ...props
}) => { }) => {
const theme = useTheme() const theme = useTheme()
@ -69,6 +71,7 @@ export const PostsGrid: React.FC<PostsGridProps> = ({
applySizeStyles={false} applySizeStyles={false}
className="post-card" className="post-card"
contentType={post.type} contentType={post.type}
displayYear={displayYear}
displayPodcastShow={displayPodcastShow} displayPodcastShow={displayPodcastShow}
data={PostCard.toData(post, shows)} data={PostCard.toData(post, shows)}
/> />

View File

@ -37,6 +37,7 @@ export const HomePage: React.FC<HomePageProps> = ({
<PostsGrid <PostsGrid
posts={group1} posts={group1}
horizontal horizontal
displayYear={false}
pattern={[{ cols: 5, size: 'xxsmall' }]} pattern={[{ cols: 5, size: 'xxsmall' }]}
breakpoints={[ breakpoints={[
{ {