forked from mrwyndham/fastpocket
45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import PageHeader from "@/sections/PageHeader";
|
|
import BlogCard from "@/components/BlogCard";
|
|
import getPostMetadata from "@/utils/getPostMetaData";
|
|
import React from "react";
|
|
import Background from "@/components/Utilities/Background";
|
|
import Footer from "@/components/Footer";
|
|
|
|
export default async function BlogsPage() {
|
|
const postMetadata = await getPostMetadata();
|
|
|
|
console.log("blogs", postMetadata.length);
|
|
const postPreviews = postMetadata
|
|
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
|
|
.map((post) => <BlogCard key={post.slug} {...(post as any)} />);
|
|
return (
|
|
<main
|
|
id="content"
|
|
role="main"
|
|
className="h-full flex-grow flex flex-col bg-base-100"
|
|
>
|
|
<Background>
|
|
{/* Page sections */}
|
|
<PageHeader
|
|
title="Blogs"
|
|
subtitle={
|
|
<>
|
|
{" "}
|
|
<h2 className="text-base-content text-2xl font-medium text-center max-w-5xl mx-auto px-6">
|
|
Take a look as we show you how to make a great PocketBase +
|
|
React App
|
|
</h2>
|
|
</>
|
|
}
|
|
/>
|
|
<div className="max-w-6xl mx-auto mb-auto pb-24 h-full w-full py-12 px-8">
|
|
<div className="w-full flex items-start justify-center flex-row flex-wrap gap-x-8 gap-y-8 md:gap-8 text-base-content ">
|
|
{postPreviews}
|
|
</div>
|
|
</div>
|
|
<Footer />
|
|
</Background>
|
|
</main>
|
|
);
|
|
}
|