Spaces:
Running
Running
File size: 2,336 Bytes
5301c48 |
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 70 71 72 73 74 75 |
import { client } from "../../sanity/client";
import type { SanityDocument } from "next-sanity";
import { AnimatedBlogCard } from "../../components/ui/animated-blog-card";
import { AnimatedBlogHeader } from "../../components/ui/animated-blog-header";
import { allPostsQuery } from './queries';
const options = { next: { revalidate: 30 } };
interface BlogPost extends SanityDocument {
title: string;
slug: string;
publishedAt: string;
excerpt?: string;
mainImage?: {
image: {
asset: {
_id: string;
url: string;
metadata: {
dimensions: {
width: number;
height: number;
};
};
};
};
};
}
export default async function BlogPage() {
const posts = await client.fetch<BlogPost[]>(allPostsQuery, {}, options);
return (
<div className="min-h-screen bg-[#FDF2F8]">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<AnimatedBlogHeader />
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 pb-16">
{posts.map((post, index) => (
<AnimatedBlogCard
key={post._id}
post={post}
postImageUrl={post.mainImage?.image?.asset?.url || null}
index={index}
/>
))}
</div>
{posts.length === 0 && (
<div className="text-center py-16 bg-white rounded-2xl shadow-xl mb-16">
<div className="bg-pink-100 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
<svg
className="h-8 w-8 text-[#DB2777]"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9.5a2.5 2.5 0 00-2.5-2.5H15"
/>
</svg>
</div>
<h2 className="text-2xl font-semibold text-gray-900 mb-2">No Posts Yet</h2>
<p className="text-gray-600">
Check back soon for our latest articles and insights.
</p>
</div>
)}
</div>
</div>
);
} |