Roadmap to becoming a developer in 2022
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

29 lines
1009 B

import Link from 'next/link';
import formatDate from 'date-fns/format'
import { Author, AuthorImage, AuthorName, BlockLink, BlockMeta, BlockSubtitle, BlockTitle, PublishDate } from './style';
import { findByUsername } from 'lib/author';
const FeaturedGuide = ({ guide }) => {
const author = findByUsername(guide.author) || {};
return (
<div className="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 grid-item-container">
<Link href={ guide.url } passHref>
<BlockLink>
<BlockTitle>{ guide.title }</BlockTitle>
<BlockSubtitle>{ guide.featuredDescription || guide.description }</BlockSubtitle>
<BlockMeta>
<Author>
<AuthorImage src={ author.picture } />
<AuthorName>{ author.name }</AuthorName>
</Author>
<PublishDate>{ formatDate(new Date(guide.createdAt), 'MMMM d, yyyy') }</PublishDate>
</BlockMeta>
</BlockLink>
</Link>
</div>
)
};
export default FeaturedGuide;