updated category page

src/components/categorycard/CategoryCard.jsx

@@ -159,10 +159,22 @@ const CategoryCard = React.memo(
                             </p>
                           </div>
                         )}
+                        {item.tvInfo?.showType && (
                           <div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
                             {item.tvInfo.showType.split(" ").shift()}
                           </div>
-                        <div className="w-0.5 h-0.5 rounded-full bg-white/60"></div>
+                        )}
+                        {item.releaseDate && (
+                          <div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
+                            {item.releaseDate}
+                          </div>
+                        )}
+                        {!item.tvInfo?.showType && item.type && (
+                          <div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
+                            {item.type}
+                          </div>
+                        )}
+                        {(item.tvInfo?.duration || item.duration) && (
                           <div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
                             {item.tvInfo?.duration === "m" ||
                             item.tvInfo?.duration === "?" ||
@@ -171,6 +183,7 @@ const CategoryCard = React.memo(
                               ? "N/A"
                               : item.tvInfo?.duration || item.duration || "N/A"}
                           </div>
+                        )}
                       </div>
                     </div>
                   </div>
@@ -253,9 +266,22 @@ const CategoryCard = React.memo(
                           </p>
                         </div>
                       )}
+                      {item.tvInfo?.showType && (
                         <div className="bg-[#2a2a2a] text-white rounded-[2px] px-1.5 py-0.5 text-[10px] font-medium max-[478px]:py-0.5 max-[478px]:px-1 max-[478px]:hidden">
                           {item.tvInfo.showType.split(" ").shift()}
                         </div>
+                      )}
+                      {item.releaseDate && (
+                        <div className="bg-[#2a2a2a] text-white rounded-[2px] px-1.5 py-0.5 text-[10px] font-medium max-[478px]:py-0.5 max-[478px]:px-1">
+                          {item.releaseDate}
+                        </div>
+                      )}
+                      {!item.tvInfo?.showType && item.type && (
+                        <div className="bg-[#2a2a2a] text-white rounded-[2px] px-1.5 py-0.5 text-[10px] font-medium max-[478px]:py-0.5 max-[478px]:px-1">
+                          {item.type}
+                        </div>
+                      )}
+                      {(item.tvInfo?.duration || item.duration) && (
                         <div className="bg-[#2a2a2a] text-white rounded-[2px] px-1.5 py-0.5 text-[10px] font-medium max-[478px]:py-0.5 max-[478px]:px-1 max-[478px]:hidden">
                           {item.tvInfo?.duration === "m" ||
                           item.tvInfo?.duration === "?" ||
@@ -264,6 +290,7 @@ const CategoryCard = React.memo(
                             ? "N/A"
                             : item.tvInfo?.duration || item.duration || "N/A"}
                         </div>
+                      )}
                     </div>
                   </div>
                 </div>

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,69 +26,76 @@ 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 && (
+          </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
-                  label={label.split("/").pop()}
               data={categoryInfo}
               showViewMore={false}
-                  className={"mt-0"}
+              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>
+        ) : 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>
         ) : (
-        <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]">
+              No results found for: {label.split("/").pop()}
+            </p>
+          </div>
         )}
       </div>
+    </div>
   );
 }