Permalink
Feb 3, 2021
Newer
100644
47 lines (40 sloc)
1.25 KB
1
import Link from 'next/link';
2
3
export default function PostFeed({ posts, admin }) {
4
return posts ? posts.map((post) => <PostItem post={post} key={post.slug} admin={admin} />) : null;
5
}
6
7
function PostItem({ post, admin = false }) {
8
// Naive method to calc word count and read time
9
const wordCount = post?.content.trim().split(/\s+/g).length;
10
const minutesToRead = (wordCount / 100 + 1).toFixed(0);
11
12
return (
13
<div className="card">
14
<Link href={`/${post.username}`}>
15
<a>
16
<strong>By @{post.username}</strong>
17
</a>
18
</Link>
19
20
<Link href={`/${post.username}/${post.slug}`}>
21
<h2>
22
<a>{post.title}</a>
23
</h2>
24
</Link>
25
26
<footer>
27
<span>
28
{wordCount} words. {minutesToRead} min read
29
</span>
30
<span className="push-left">💗 {post.heartCount || 0} Hearts</span>
31
</footer>
32
33
{/* If admin view, show extra controls for user */}
34
{admin && (
35
<>
36
<Link href={`/admin/${post.slug}`}>
37
<h3>
38
<button className="btn-blue">Edit</button>
39
</h3>
40
</Link>
41
42
{post.published ? <p className="text-success">Live</p> : <p className="text-danger">Unpublished</p>}
43
</>
44
)}
45
</div>
46
);
47
}