This repository has been archived by the owner on Mar 14, 2024. It is now read-only.
/
page.tsx
69 lines (64 loc) · 1.87 KB
/
page.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import Link from 'next/link';
import Image from 'next/image';
import { query } from '@/lib/hashnode';
import { Post } from '@/types/posts';
import Container from '@/components/Container';
export default async function Home() {
const { data: { publication } } = await query({
query: `
query($host: String!) {
publication(host: $host) {
posts(first: 10) {
edges {
node {
coverImage {
url
}
id
publishedAt
slug
title
}
}
}
}
}
`,
variables: {
host: process.env.HASHNODE_HOST
}
});
const posts: Array<Post> = publication.posts.edges.map(({ node }: { node: Post }) => node);
return (
<>
<Container className="max-w-4xl">
<ul>
{ posts.map((post) => {
return (
<li key={post.id} className="grid sm:grid-cols-2 gap-8 mb-16">
<Link href={`/posts/${post.slug}`}>
<Image width="600" height="400" className="rounded border border-zinc-200" src={post.coverImage.url} alt="" />
</Link>
<div>
<h2 className="text-2xl pb-5 border-b-2 mb-5">
<Link href={`/posts/${post.slug}`}>{ post.title }</Link>
</h2>
<p className="text-zinc-500">
{
new Date(post.publishedAt).toLocaleDateString('en-us', {
weekday: 'long',
year: 'numeric',
month: 'short',
day: 'numeric'
})
}
</p>
</div>
</li>
)
}) }
</ul>
</Container>
</>
)
}