fix the bugs

.env

 
 
-NEXT_PUBLIC_API_URL=http://localhost:4000/
+NEXT_PUBLIC_API_URL='http://192.168.1.161:3000'
 

app/api/route.ts

 // app/api/hello/route.js
-
-import { getAllPosts } from '@/lib/posts';
 import { NextResponse } from 'next/server';
+import { getAllPosts } from '@/lib/posts';
 
 export async function GET() {
-    const Data = getAllPosts();
-  return NextResponse.json({ Data });
+  const Data = getAllPosts(); // Fetch your data here
+
+  // Create a response with CORS headers
+  const response = NextResponse.json({ Data });
+
+  // Add CORS headers
+  response.headers.set('Access-Control-Allow-Origin', '*');
+  response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+  response.headers.set('Access-Control-Allow-Headers', 'Content-Type');
+
+  return response;
+}
+
+export async function OPTIONS() {
+  // CORS preflight response
+  return new Response(null, {
+    status: 204,
+    headers: {
+      'Access-Control-Allow-Origin': '*', // Adjust as needed
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+      'Access-Control-Max-Age': '86400', // 24 hours
+    },
+  });
 }

components/base/loader/Loader.tsx

+const Loader = () => {
+    return (<div className="w-32 h-32 border-6 p-[50px]  border-b-white dark:border-b-black dark:border-white border-black animate-spin"></div>
+        );
+}
+ 
+export default Loader;
\ No newline at end of file

hooks/AppContext.tsx

 'use client';
-import { pageData } from "@/utils/Data";
 import axios from "axios";
 import React, { useEffect } from "react";
 import { createContext,useState } from "react";
@@ -8,7 +7,7 @@ type ContextType= {
     ToggleTheme: () => void;
     data:{
     id: number;
-    blogTitle: string;
+    title: string;
     authorDetails: {
         author: string;
         date: Date;
@@ -31,6 +30,7 @@ type ContextType= {
     size: number;
     currentPage: number;
     handleChangePage: (page: number) => void;
+    isLoading:boolean
     }
 export const Context = createContext<ContextType>({
     start: 1,
@@ -38,10 +38,11 @@ export const Context = createContext<ContextType>({
     size: 1,
     currentPage: 1,
     handleChangePage: () => { },
-    data: pageData,
+    data: [],
     handleFilter: () => { },
     theme: 'dark',
-    ToggleTheme:()=>{}
+    ToggleTheme: () => { },
+    isLoading: false
 })
 interface AppContextProps{
     children: React.ReactNode
@@ -61,17 +62,20 @@ const AppContext = ({ children }: AppContextProps) => {
         setstart((page - 1) * size);
         setend(page * size);
     }
-        const [filter, setFilter] = useState<any>([]);
-    const [pageData, setPageData] = useState<any>([]);
-
+        const [filter, setFilter] = useState([]);
+    const [pageData, setPageData] = useState([]);
+    const [isLoading, setisLoading] = useState(false);
     // Fetch data from API and set state
     useEffect(() => {
         const fetchData = async () => {
             try {
-                const res = await axios.get('http://localhost:3000/api/');
+                setisLoading(true);
+                const res = await axios.get(`${process.env.NEXT_PUBLIC_API_URL}/api/`);
                 setPageData(res.data.Data);
                 setFilter(res.data.Data); // Set filter with fetched data
-            } catch (error) {
+                setisLoading(false);
+                } catch (error) {
+                setisLoading(false);
                 console.error("Error fetching data:", error);
             }
         };
@@ -80,13 +84,14 @@ const AppContext = ({ children }: AppContextProps) => {
     }, []);
 
     // Handle filtering of data based on search input
-    const handleFilter = (search:string) => {
+    const handleFilter = (search: string) => {
+        
         if (search.trim() === "") {
             setFilter(pageData);
         } else {
             setFilter(
                 pageData.filter((data:any) =>
-                    data.blogTitle.toLowerCase().includes(search.toLowerCase())
+                    data.title.toLowerCase().includes(search.toLowerCase())
                 )
             );
         }
@@ -101,6 +106,7 @@ const AppContext = ({ children }: AppContextProps) => {
         size,
         currentPage,
         handleChangePage,
+        isLoading
     }}>
         {children}
     </Context.Provider> );

next.config.js

+
+
 module.exports = {
   images: {
     domains:['cdn.pixabay.com','images.pexels.com'],
@@ -26,10 +28,24 @@ module.exports = {
     return [
       {
         source: '/api/:path*',
-        destination: `${process.env.NEXT_PUBLIC_API_URL}/:path*`
+        destination: `${process.env.NEXT_PUBLIC_API_URL}/api/:path*`,
+        
       }
     ];
   },
+  async headers() {
+    return [
+      {
+        // matching all API routes
+        source: "/api/:path*",
+        headers: [
+          { key: "Access-Control-Allow-Origin", value: "*" }, // replace this your actual origin
+          { key: "Access-Control-Allow-Methods", value:'GET, POST, PUT, DELETE, OPTIONS' },
+          { key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" },
+        ]
+      }
+    ]
+  },
   poweredByHeader: false,
   compress: false,
 };

pages/Home.tsx

 'use client'
 import Heading from "@/components/base/Heading/Heading";
+import Loader from "@/components/base/loader/Loader";
 import BlogCard from "@/components/Top-Level/blog-card/BlogCard";
 import Pagination from "@/components/Top-Level/pagination/pagination";
 import { Context } from "@/hooks/AppContext";
@@ -9,7 +10,7 @@ import { useContext, useEffect, useState } from "react";
 const Home = () => {
     const [isMounted, setisMounted] = useState(false)
     const router = useRouter();
-    const {data, size, currentPage, start, end, handleChangePage } = useContext(Context);
+    const {data, size, currentPage, start, end, handleChangePage,isLoading } = useContext(Context);
     useEffect(() => {
         setisMounted(true);
     }, [])
@@ -17,23 +18,24 @@ const Home = () => {
     if (!isMounted) {
         return null
     }
-    console.log(data)
     return (
                 <div className="max-w-[1100px] mx-auto px-4 ">
                     <Heading /> 
             <div className="flex flex-wrap gap-6 w-full dark:bg-black mt-4">
                 {
-                    data.length === 0 && <h2 className=" capitalize dark:text-white text-center w-full text-2xl font-semibold py-5">no Data found</h2>
+                    isLoading && <Loader />
+                }
+                {
+                    !isLoading && data?.length === 0 && <h2 className=" capitalize dark:text-white text-center w-full text-2xl font-semibold py-5">no Data found</h2>
                 }
                     {data?.slice(start,end).map((data) => (
                         <div key={data.id} className="flex-grow sm:flex-grow-0 sm:w-[calc(50%-1rem)]
                         lg:w-[calc(33.33%-1rem)] *:sm:max-w-full *:h-full">
                             <BlogCard {
                                 ...{
-                                title: data.blogTitle,
                                 img: data.banner.img,
                                 ...data.authorDetails,
-                                date:new Date(data.authorDetails.date),
+                                date:new Date(data?.authorDetails.date),
                                 ...data,
                                 }
                             } handleClick={() => {
@@ -43,8 +45,7 @@ const Home = () => {
                     ))}
                     </div>
                     <center className="w-full  p-2 sm:p-4 md:p-6 flex justify-center ">
-                <Pagination size={Math.ceil(data
-                    .length / size)} onChange={handleChangePage} currentPage={currentPage} />
+                <Pagination size={Math.ceil(data?.length / size)} onChange={handleChangePage} currentPage={currentPage} />
                     </center>
                 </div >
             

pages/blog.tsx

@@ -33,7 +33,7 @@ interface BlogData {
 }
 
 const Blog: React.FC<BlogProps> = async ({ id }) => {
-  const res = await axios.get<BlogData>('http://localhost:3000/api/');
+  const res = await axios.get<BlogData>(`${process.env.NEXT_PUBLIC_API_URL}/api/`);
   const data = res.data.Data;
   console.log(data)
   const blogData = data.find(item => item.id === id);

posts/11.md

 ---
 id: 11
-blogTitle: "The Ultimate Guide to Adventure Travel"
+title: "The Ultimate Guide to Adventure Travel"
 authorDetails:
   author: "Jane Smith"
   date: "2021-01-15"

posts/12.md

 ---
 id: 12
-blogTitle: "10 Must-Visit Destinations in Africa"
+title: "10 Must-Visit Destinations in Africa"
 authorDetails:
   author: "Alex Johnson"
   date: "2021-05-10"

posts/13.md

 ---
 id: 13
-blogTitle: "Boost Your Productivity with These Office Hacks"
+title: "Boost Your Productivity with These Office Hacks"
 authorDetails:
   author: "Emily Davis"
   date: "2021-07-21"

posts/14.md

 ---
 id: 14
-blogTitle: "Healthy Eating: 7 Delicious Salad Recipes"
+title: "Healthy Eating: 7 Delicious Salad Recipes"
 authorDetails:
   author: "Michael Lee"
   date: "2021-08-30"

posts/15.md

 ---
 id: 15
-blogTitle: "Top Hiking Trails for Beginners"
+title: "Top Hiking Trails for Beginners"
 authorDetails:
   author: "Sophia Martinez"
   date: "2022-01-20"

posts/16.md

 ---
 id: 16
-blogTitle: "Understanding Asynchronous JavaScript"
+title: "Understanding Asynchronous JavaScript"
 authorDetails:
   author: "David Robinson"
   date: "2022-03-05"

posts/17.md

 ---
 id: 17
-blogTitle: "How to Start a Blog: A Step-by-Step Guide"
+title: "How to Start a Blog: A Step-by-Step Guide"
 authorDetails:
   author: "Mia Harris"
   date: "2022-04-20"

posts/18.md

 ---
 id: 18
-blogTitle: "Remote Work: Tips for Staying Productive"
+title: "Remote Work: Tips for Staying Productive"
 authorDetails:
   author: "Isabella Walker"
   date: "2022-05-15"

posts/19.md

 ---
 id: 19
-blogTitle: "Architectural Wonders Around the World"
+title: "Architectural Wonders Around the World"
 authorDetails:
   author: "Isabella Walker"
   date: "2022-05-15"

posts/20.md

 ---
 id: 20
-blogTitle: "The Future of Air Travel"
+title: "The Future of Air Travel"
 authorDetails:
   author: "Matthew Taylor"
   date: "2022-06-30"