added dates in the site

app/(root)/blog/[slug]/page.tsx

@@ -4,16 +4,18 @@ import Image from "next/image";
 import Link from "next/link";
 import { ArrowLeft } from "lucide-react";
 import { Separator } from "@/components/ui/separator";
-import NotFound from "@/app/not-found";
+import { notFound } from "next/navigation";
 import { Metadata } from "next";
+import { format } from "date-fns";
 
 async function getData(slug: string) {
 	const query = `
     *[_type == "blog" && slug.current == '${slug}'] {
         "currentSlug": slug.current,
-            title,
-            content,
-            titleImage
+        title,
+        content,
+        titleImage,
+        _createdAt
     }[0]`;
 
 	const data = await client.fetch(query);
@@ -25,6 +27,7 @@ interface BlogSlugArticle {
 	title: string;
 	content: any;
 	titleImage: string;
+	_createdAt: string;
 }
 
 export async function generateMetadata({
@@ -77,9 +80,11 @@ export default async function BlogSlugArticle({
 	const data: BlogSlugArticle = await getData(params.slug);
 
 	if (!data) {
-		return <NotFound />;
+		notFound();
 	}
 
+	const formattedDate = format(new Date(data._createdAt), "MMMM d, yyyy");
+
 	return (
 		<>
 			<section className="max-w-5xl container mx-auto py-8 md:py-28 flex flex-col items-center px-4">
@@ -90,10 +95,10 @@ export default async function BlogSlugArticle({
 					<ArrowLeft className="mr-2" />
 					Back to Blog
 				</Link>
-				<header className="text-start mb-12 w-full">
+				<header className="text-start mb-8 w-full">
 					{data.titleImage && (
-						<div className="mb-8">
-							<h1 className="text-3xl md:text-5xl mb-12 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
+						<div className="mb-2">
+							<h1 className="text-3xl md:text-5xl mb-12 py-4 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
 								{data.title}
 							</h1>
 							<Image
@@ -104,6 +109,9 @@ export default async function BlogSlugArticle({
 								priority
 								className="w-full h-auto object-cover rounded-md"
 							/>
+							<p className="mt-4 text-xl text-muted-foreground">
+								Uploaded at {formattedDate}
+							</p>{" "}
 						</div>
 					)}
 				</header>

app/(root)/not-found.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link";
+
+const NotFound = () => {
+	return (
+		<section id="404error" className="flex-center flex-col wrapper container">
+			<h1 className="text-3xl md:text-5xl text-center">
+				<span className="text-red-500">404</span> Page not Found
+			</h1>
+			<p className="text-lg mt-3 text-muted-foreground">
+				Please return back to{" "}
+				<Link href="/" className="underline font-bold">
+					Home
+				</Link>
+			</p>
+		</section>
+	);
+};
+
+export default NotFound;

app/not-found.tsx

@@ -1,19 +0,0 @@
-import Link from "next/link";
-
-const NotFound = () => {
-  return (
-    <section id="404error" className="flex-center flex-col wrapper container">
-      <h1 className="text-3xl md:text-5xl text-center">
-        <span className="text-red-500">404</span> Page not Found
-      </h1>
-      <p className="text-lg mt-3 text-muted-foreground">
-        Please return back to{" "}
-        <Link href="/" className="underline font-bold">
-          Home
-        </Link>
-      </p>
-    </section>
-  );
-};
-
-export default NotFound;

components/cards/BlogCards.tsx

@@ -12,12 +12,14 @@ import {
 	PaginationNext,
 	PaginationPrevious,
 } from "@/components/ui/pagination";
+import { format } from "date-fns";
 
 interface BlogPostcard {
 	title: string;
 	smallDescription: string;
 	currentSlug: string;
 	titleImage: string;
+	_createdAt: string; // Add createdAt field
 }
 
 interface BlogCardsProps {
@@ -33,7 +35,8 @@ const BlogCards: React.FC<BlogCardsProps> = async ({ searchParams }) => {
     title,
     smallDescription,
     "currentSlug": slug.current,
-    titleImage
+    titleImage,
+	_createdAt
   }[${(currentPage - 1) * cardsPerPage}...${currentPage * cardsPerPage}]`;
 
 	const posts: BlogPostcard[] = await client.fetch(query);
@@ -47,38 +50,49 @@ const BlogCards: React.FC<BlogCardsProps> = async ({ searchParams }) => {
 	return (
 		<>
 			<section className="grid max-w-6xl gap-4 mx-auto sm:grid-cols-2 lg:grid-cols-3">
-				{posts.map((post, idx) => (
-					<Card
-						className="group h-full w-full rounded-lg border overflow-hidden"
-						key={idx}
-					>
-						<Link href={`/blog/${post.currentSlug}`} className="block">
-							<div className="relative overflow-hidden rounded-t-lg">
-								<Image
-									src={urlFor(post.titleImage).url()}
-									alt={post.title}
-									width={500}
-									height={300}
-									priority
-									className="w-full object-cover transition-transform duration-200 group-hover:scale-105"
-								/>
-							</div>
-							<CardContent className="p-4">
-								<div className="flex-between mb-2 py-2">
-									<h3 className="text-xl font-semibold leading-tight">
-										{post.title}
-									</h3>
-									<div className="text-sm text-muted-foreground opacity-0 group-hover:opacity-100 duration-300">
-										<ExternalLink />
-									</div>
+				{posts.map((post, idx) => {
+					const formattedDate = format(
+						new Date(post._createdAt),
+						"MMMM d, yyyy"
+					); // Format the date
+
+					return (
+						<Card
+							className="group h-full w-full rounded-lg border overflow-hidden"
+							key={idx}
+						>
+							<Link href={`/blog/${post.currentSlug}`} className="block">
+								<div className="relative overflow-hidden rounded-t-lg">
+									<Image
+										src={urlFor(post.titleImage).url()}
+										alt={post.title}
+										width={500}
+										height={300}
+										priority
+										className="w-full object-cover transition-transform duration-200 group-hover:scale-105"
+									/>
 								</div>
-								<p className="text-sm text-muted-foreground">
-									{post.smallDescription}
-								</p>
-							</CardContent>
-						</Link>
-					</Card>
-				))}
+								<CardContent className="p-4">
+									<div className="flex-between mb-2 py-2">
+										<h3 className="text-xl font-semibold leading-tight">
+											{post.title}
+										</h3>
+										<div className="text-sm text-muted-foreground opacity-0 group-hover:opacity-100 duration-300">
+											<ExternalLink />
+										</div>
+									</div>
+									<p className="text-sm text-muted-foreground">
+										{post.smallDescription}
+									</p>
+									<p className="text-xs text-muted-foreground mt-2">
+										Published on: {formattedDate}{" "}
+										{/* Display the formatted date */}
+									</p>
+								</CardContent>
+							</Link>
+						</Card>
+					);
+				})}
 			</section>
 			<div className="flex-center mt-12">
 				{totalPages > 1 && (

svrjs/schemaTypes/blog.ts

@@ -21,6 +21,11 @@ export default {
       type: 'image',
       title: 'Title Image',
     },
+    // {
+    //   name: 'publishedAt',
+    //   title: 'Published At',
+    //   type: 'datetime',
+    // },
     {
       name: 'smallDescription',
       type: 'text',