updated category page

src/pages/category/Category.jsx

@@ -2,14 +2,9 @@ import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import getCategoryInfo from "@/src/utils/getCategoryInfo.utils";
 import CategoryCard from "@/src/components/categorycard/CategoryCard";
-import Genre from "@/src/components/genres/Genre";
-import Topten from "@/src/components/topten/Topten";
-import Loader from "@/src/components/Loader/Loader";
-import Error from "@/src/components/error/Error";
+import CategoryCardLoader from "@/src/components/Loader/CategoryCard.loader";
 import { useNavigate } from "react-router-dom";
-import { useHomeInfo } from "@/src/context/HomeInfoContext";
 import PageSlider from "@/src/components/pageslider/PageSlider";
-import SidecardLoader from "@/src/components/Loader/Sidecard.loader";
 
 function Category({ path, label }) {
   const [searchParams, setSearchParams] = useSearchParams();
@@ -18,8 +13,8 @@ function Category({ path, label }) {
   const [error, setError] = useState(null);
   const [totalPages, setTotalPages] = useState(0);
   const page = parseInt(searchParams.get("page")) || 1;
-  const { homeInfo, homeInfoLoading } = useHomeInfo();
   const navigate = useNavigate();
+  
   useEffect(() => {
     const fetchCategoryInfo = async () => {
       setLoading(true);
@@ -31,68 +26,75 @@ function Category({ path, label }) {
       } catch (err) {
         setError(err);
         console.error("Error fetching category info:", err);
+        setLoading(false);
       }
     };
     fetchCategoryInfo();
-    window.scrollTo(0, 0);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
   }, [path, page]);
-  if (loading) return <Loader type="category" />;
-  if (error) {
-    navigate("/error-page");
-    return <Error />;
-  }
-  if (!categoryInfo) {
-    navigate("/404-not-found-page");
-    return null;
-  }
+
   const handlePageChange = (newPage) => {
     setSearchParams({ page: newPage });
   };
 
+  const categoryGridClass = "grid-cols-8 max-[1600px]:grid-cols-6 max-[1200px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3 max-[478px]:gap-x-2";
+
   return (
-    <div className="w-full flex flex-col gap-y-4 mt-[64px] max-md:mt-[50px]">
-      {categoryInfo ? (
-        <div className="w-full px-4 grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex max-[1200px]:flex-col max-[1200px]:gap-y-10 max-[478px]:px-2">
-          {page > totalPages ? (
-            <p className="font-bold text-2xl text-[#ffbade] max-[478px]:text-[18px] max-[300px]:leading-6">
+    <div className="max-w-[1600px] mx-auto flex flex-col mt-[64px] max-md:mt-[50px]">
+      <div className="w-full flex flex-col gap-y-8 mt-6">
+        {loading ? (
+          <CategoryCardLoader className={"max-[478px]:mt-2"} gridClass={categoryGridClass} />
+        ) : page > totalPages ? (
+          <div className="flex flex-col gap-y-4">
+            <h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
+              {label.split("/").pop()}
+            </h1>
+            <p className="text-white text-lg max-[478px]:text-[16px] max-[300px]:leading-6">
               You came a long way, go back <br className="max-[300px]:hidden" />
               nothing is here
             </p>
-          ) : (
-            <div>
-              {categoryInfo && categoryInfo.length > 0 && (
-                <CategoryCard
-                  label={label.split("/").pop()}
-                  data={categoryInfo}
-                  showViewMore={false}
-                  className={"mt-0"}
-                  categoryPage={true}
-                  path={path}
-                />
-              )}
+          </div>
+        ) : categoryInfo && categoryInfo.length > 0 ? (
+          <div className="flex flex-col gap-y-2 max-[478px]:gap-y-0">
+            <h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
+              {label.split("/").pop()}
+            </h1>
+            <CategoryCard
+              data={categoryInfo}
+              showViewMore={false}
+              className="mt-0"
+              gridClass={categoryGridClass}
+              categoryPage={true}
+              path={path}
+            />
+            <div className="flex justify-center w-full mt-8">
               <PageSlider
                 page={page}
                 totalPages={totalPages}
                 handlePageChange={handlePageChange}
               />
             </div>
-          )}
-          <div className="w-full flex flex-col gap-y-10">
-            {homeInfoLoading ? (
-              <SidecardLoader />
-            ) : (
-              <>
-                {homeInfo && homeInfo.topten && (
-                  <Topten data={homeInfo.topten} className="mt-0" />
-                )}
-                {homeInfo?.genres && <Genre data={homeInfo.genres} />}
-              </>
-            )}
           </div>
-        </div>
-      ) : (
-        <Error />
-      )}
+        ) : error ? (
+          <div className="flex flex-col gap-y-4">
+            <h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
+              {label.split("/").pop()}
+            </h1>
+            <p className="text-white text-lg max-[478px]:text-[16px]">
+              Couldn't get {label.split("/").pop()} results, please try again
+            </p>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-y-4">
+            <h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
+              {label.split("/").pop()}
+            </h1>
+            <p className="text-white text-lg max-[478px]:text-[16px]">
+              No results found for: {label.split("/").pop()}
+            </p>
+          </div>
+        )}
+      </div>
     </div>
   );
 }