fix: fix post label and stats formatting, fixes #99

This commit is contained in:
Hossein Mehrabi 2023-08-26 20:47:43 +03:30
parent 1009855cfc
commit 6387bb7b4b
No known key found for this signature in database
GPG Key ID: 45C04964191AFAA1
2 changed files with 41 additions and 28 deletions

View File

@ -10,17 +10,21 @@ const ArticleStats = ({
}) => (
<Row>
<Typography variant="body3" genericFontFamily="sans-serif">
{readingLength} minutes read
</Typography>
<Typography variant="body3"></Typography>
<Typography variant="body3" genericFontFamily="sans-serif">
{date &&
date.toLocaleString('en-GB', {
day: 'numeric',
month: 'long', // TODO: Should be uppercase
year: 'numeric',
})}
{readingLength} MIN
</Typography>
{date && (
<>
<Typography variant="body3"></Typography>
<Date variant="body3" genericFontFamily="sans-serif">
{date &&
date.toLocaleString('en-GB', {
day: 'numeric',
month: 'short',
year: 'numeric',
})}
</Date>
</>
)}
</Row>
)
@ -32,4 +36,8 @@ const Row = styled.div`
margin-bottom: 12px;
`
const Date = styled(Typography)`
text-transform: uppercase;
`
export default ArticleStats

View File

@ -1,7 +1,7 @@
import { Typography } from '@acid-info/lsd-react'
import React, { FC } from 'react'
import styled from '@emotion/styled'
import { LPE } from '@/types/lpe.types'
import { Typography } from '@acid-info/lsd-react'
import styled from '@emotion/styled'
import React, { FC } from 'react'
import PostType = LPE.PostType
export type Props = React.ComponentProps<typeof Container> & {
@ -21,21 +21,22 @@ export const PostCardLabel: FC<Props> = ({
<Typography variant="body3" genericFontFamily="sans-serif">
{contentType.toUpperCase()}
</Typography>
<Typography variant="body3"></Typography>
<Typography variant="body3" genericFontFamily="sans-serif">
{date &&
date.toLocaleString('en-GB', {
day: 'numeric',
month: 'long', // TODO: Should be uppercase
...(displayYear
? {
year: 'numeric',
}
: {}),
})}
</Typography>
{date && (
<>
<Typography variant="body3"></Typography>
<Date variant="body3" genericFontFamily="sans-serif">
{date.toLocaleString('en-GB', {
day: 'numeric',
month: 'short',
...(displayYear
? {
year: 'numeric',
}
: {}),
})}
</Date>
</>
)}
</Container>
)
}
@ -46,3 +47,7 @@ const Container = styled.div`
align-items: center;
gap: 8px;
`
const Date = styled(Typography)`
text-transform: uppercase;
`