fix: hide the year of most recent posts on the landing page
This commit is contained in:
parent
187c6de312
commit
563ae6db2e
|
@ -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>
|
||||||
|
|
|
@ -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}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
|
|
@ -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)}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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={[
|
||||||
{
|
{
|
||||||
|
|
Loading…
Reference in New Issue