67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import type { Metadata } from 'next';
|
|
import { getAllPosts } from './utils';
|
|
import {
|
|
BlogBackground,
|
|
BlogArticleCard,
|
|
BlogPageHeader,
|
|
// BlogSearchInput,
|
|
// BlogCategories,
|
|
BlogNewsletter,
|
|
// BlogTags,
|
|
} from './_components';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Blog | Banatie',
|
|
description:
|
|
'Articles, guides, and updates about AI-powered placeholder images.',
|
|
};
|
|
|
|
// const defaultTags = ['ai', 'image-generation', 'api', 'midjourney', 'flux'];
|
|
|
|
export default function BlogPage() {
|
|
const posts = getAllPosts();
|
|
// const categories = getCategories();
|
|
|
|
return (
|
|
<>
|
|
<BlogBackground />
|
|
<main className="flex-grow bg-transparent relative z-10 pt-10 pb-12 lg:pt-16 lg:pb-20">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12">
|
|
<div className="lg:col-span-8 xl:col-span-9">
|
|
<BlogPageHeader />
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
|
{posts.map((post) => (
|
|
<BlogArticleCard key={post.slug} post={post} />
|
|
))}
|
|
</div>
|
|
|
|
{posts.length === 0 && (
|
|
<p className="text-gray-500 text-center py-12">
|
|
No articles yet. Check back soon!
|
|
</p>
|
|
)}
|
|
|
|
{posts.length > 6 && (
|
|
<div className="mt-16 flex justify-center">
|
|
<button className="px-6 py-3 rounded-lg border border-white/10 bg-[#111827] text-sm font-medium text-white hover:bg-white/5 transition-colors">
|
|
Load More Articles
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<aside className="lg:col-span-4 xl:col-span-3 space-y-8">
|
|
{/* <BlogSearchInput /> */}
|
|
{/* <BlogCategories categories={categories} /> */}
|
|
<BlogNewsletter />
|
|
{/* <BlogTags tags={defaultTags} /> */}
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|