38 lines
1.4 KiB
TypeScript
38 lines
1.4 KiB
TypeScript
import Link from 'next/link'
|
|
import { formatDate, getBlogPosts } from '@/app/blog/utils'
|
|
|
|
export function BlogPosts() {
|
|
const allBlogs = getBlogPosts()
|
|
|
|
return (
|
|
<ul className="divide-y divide-black/5 dark:divide-white/10">
|
|
{allBlogs
|
|
.sort((a, b) => {
|
|
if (new Date(a.metadata.publishedAt) > new Date(b.metadata.publishedAt)) {
|
|
return -1
|
|
}
|
|
return 1
|
|
})
|
|
.map((post) => (
|
|
<li key={post.slug}>
|
|
<Link
|
|
className="group flex items-baseline justify-between gap-4 rounded-md px-2 py-2 transition-colors hover:bg-black/[0.04] dark:hover:bg-white/5"
|
|
href={`/blog/${post.slug}`}
|
|
aria-label={`Read: ${post.metadata.title}`}
|
|
>
|
|
<span className="w-32 flex-none text-xs text-neutral-600 dark:text-neutral-400 tabular-nums">
|
|
{formatDate(post.metadata.publishedAt, false)}
|
|
</span>
|
|
<span className="flex-1 text-neutral-900 dark:text-neutral-100 tracking-tight underline-offset-4 group-hover:underline">
|
|
{post.metadata.title}
|
|
</span>
|
|
<span className="hidden sm:inline text-neutral-400 transition-colors group-hover:text-neutral-600 dark:group-hover:text-neutral-300">
|
|
→
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)
|
|
}
|