[fix] Bug

next.config.js

@@ -1,7 +1,5 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  basePath: '/TRAVEL-TIPPLER',
-  trailingSlash: true,
   images: {
     domains: ["www.traveltippler.com"],
     unoptimized: true,

src/app/category/[categoryIds]/page.js

@@ -1,17 +1,54 @@
-import React from "react";
-import CategoryDetail from "@/pages/CategoryDetail/CategoryDetail";
+"use client";
+import React from 'react'
+import Follow from "@/pages/Category/Social_Links";
+import RecentPost from "@/pages/Category/RecentPost";
+import CategorysList from "@/pages/Category/CategorysList";
+import { useParams } from 'next/navigation';
+import CATEGORYs from '@/components/helper/CATEGORYs';
+import Category_Post from '@/pages/Category/Category_Post';
+import useCategoryName from '@/components/hooks/ConvertCaps';
+import formatCategory from '@/components/hooks/ConvertSmall';
 
-const CategoryIds =  () => {
- // const postData = await fetchPostLists();
-
-  return (
-    <CategoryDetail  />
-  );
-};
 
-export default CategoryIds;
+const CategoryDetail = () => {
+  const params = useParams();
+  const name = formatCategory(params.categoryIds);
 
+  return (
+    <div className="md:flex md:justify-between mx-[5%] md:mt-2 ">
+      <div className=" sm:w-max-[1160px] bg-white h-auto">
+        <div className="mt-4">
+          <h1 className="text-2xl font-bold ml-[2%]">{name}</h1>
+        </div>
+        <hr className="m-6" />
+        {CATEGORYs.map((category, index) => {
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          const capsFormat = useCategoryName(category.category)
+          if (capsFormat === params.categoryIds) {
+            return (
+              <Category_Post
+                key={category.id}
+                description={category.detail.description}
+                date={category.date}
+                image={category.image}
+                category={category.category}
+                aurther={category.aurther}
+                heading={category.heading} />
+            );
+          }
+          return null;
+        })}
+      </div>
+      <div className="sm:w-[35rem] mt-2">
+        <Follow />
+        <RecentPost />
+        <CategorysList />
+      </div>
+    </div>
+  )
+}
 
+export default CategoryDetail
 // export const fetchPostLists = async () => {
 //   const data = await fetch("https://www.traveltippler.com/wp-json/wp/v2/posts");
 //   const responseData = await data.json();

src/pages/Category/Category.js

@@ -6,9 +6,8 @@ import RecentPost from "./RecentPost";
 import CategorysList from "./CategorysList";
 import Category_Post from "./Category_Post";
 
-
 const Category = ({fetch_categories}) => {
-console.log(fetch_categories)
+
   return (
     <div className="mx-[4%] sm:flex shadow-md ">
       <div className="">

src/pages/Category/Category_Post.js

@@ -6,8 +6,8 @@ import getFirstTwoLines from "@/components/hooks/ConvertWordLength";
 import useCategoryName from "@/components/hooks/ConvertCaps";
 import { useRouter } from "next/navigation";
 
-const Category_Post = ({ id, image,category,  aurther,heading , date, description}) => {
- 
+const Category_Post = ({ id, image, category, aurther, heading, date, description }) => {
+
   const router = useRouter();
 
   const categoryType = useCategoryName(category);
@@ -21,10 +21,10 @@ const Category_Post = ({ id, image,category,  aurther,heading , date, descriptio
   const headingHandler = (id) => {
     router.push(`/category/${categoryType}/${id}`);
   };
-  
+
   return (
     <div key={id} className="">
-     
+
       <div className="mo:p-1 pt-1 w-full ">
         <div className="relative m-3 cursor-pointer ">
           <Image