52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import styled from "styled-components"
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
|
|
import {
|
|
faBook,
|
|
faCalendar,
|
|
faFile,
|
|
faHourglass,
|
|
} from "@fortawesome/free-solid-svg-icons"
|
|
|
|
import { PageData } from "../../../types/types"
|
|
|
|
const StyledMetaContainer = styled.div`
|
|
color: ${({ theme }) => theme.theme.color.text.gray};
|
|
`
|
|
|
|
const Meta = (props: { fetchedPage: PageData }) => {
|
|
return (
|
|
<StyledMetaContainer>
|
|
{/* posts count */}
|
|
{props.fetchedPage.length > 0 && (
|
|
<>
|
|
<FontAwesomeIcon icon={faFile} />
|
|
|
|
{props.fetchedPage.length} post
|
|
{props.fetchedPage.length > 1 && "s"}
|
|
</>
|
|
)}
|
|
{/* date */}
|
|
<FontAwesomeIcon icon={faCalendar} />
|
|
|
|
{props.fetchedPage.date || "Unknown date"}
|
|
|
|
{/* read time */}
|
|
<FontAwesomeIcon icon={faHourglass} />
|
|
|
|
{props.fetchedPage.readTime
|
|
? props.fetchedPage.readTime + " read"
|
|
: "unknown length"}
|
|
|
|
{/* word count */}
|
|
<FontAwesomeIcon icon={faBook} />
|
|
|
|
{props.fetchedPage.wordCount
|
|
? props.fetchedPage.wordCount +
|
|
" word" +
|
|
(props.fetchedPage.wordCount > 1 && "s")
|
|
: "unknown words"}
|
|
</StyledMetaContainer>
|
|
)
|
|
}
|
|
|
|
export default Meta
|