In this lesson we'll highlight the author and date info in our <Post>
component so that they stand out from the rest of the post content.
Import styled
into post.js
and create and use a <PostInfo>
component.
// File: /packages/my-first-theme/src/components/post.jsimport React from "react"import { connect, styled } from "frontity"import dayjs from "dayjs"const Post = ({ state }) => {const data = state.source.get(state.router.link)const post = state.source[data.type][data.id]const author = state.source.author[post.author]const formattedDate = dayjs(post.date).format("DD MMMM YYYY")return (<div><h2>{post.title.rendered}</h2><PostInfo><p><strong>Posted: </strong>{formattedDate}</p><p><strong>Author: </strong>{author.name}</p></PostInfo><div dangerouslySetInnerHTML={{ __html: post.content.rendered }} /></div>)}export default connect(Post)const PostInfo = styled.div`background-image: linear-gradient(to right, #f4f4f4, #fff);margin-bottom: 1em;padding: 0.5em;border-left: 4px solid lightseagreen;font-size: 0.8em;& > p {margin: 0;}`
Visit one of the posts now and the date and author info are pleasingly highlighted.
For reference, this is what your site should be looking like now:
Check you're on the right track by comparing your changes with the ones in this commit.