update category object

src/models/Category.ts

@@ -0,0 +1,5 @@
+export interface Category {
+  name: string;
+  slug: string;
+  url: string;
+}

src/models/ProductSlice.ts

@@ -1,9 +1,10 @@
+import { Category } from "./Category";
 import { Product } from "./Product";
 
 export interface ProductSlice {
   allProducts: Product[];
   newProducts: Product[];
   featuredProducts: Product[];
   wishlist: Product[];
-  categories: string[];
+  categories: Category[];
 }

src/pages/AllProducts.tsx

@@ -80,18 +80,18 @@ const AllProducts: FC = () => {
           <div className="space-y-1">
             {allCategories.map((_category) => (
               <div
-                key={_category}
+                key={_category.slug}
                 className={`cursor-pointer dark:text-white hover:text-blue-500 ${
-                  _category === category ? "text-blue-500" : ""
+                  _category.slug === category ? "text-blue-500" : ""
                 }`}
                 onClick={() => {
-                  setCategory(_category);
+                  setCategory(_category.slug);
                   if (sortRef && sortRef.current)
                     sortRef.current.value = "default";
                   sortProducts("default");
                 }}
               >
-                {_category}
+                {_category.name}
               </div>
             ))}
           </div>

src/redux/features/productSlice.ts

@@ -1,6 +1,7 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { Product } from "../../models/Product";
 import { ProductSlice } from "../../models/ProductSlice";
+import { Category } from "../../models/Category";
 
 const initialState: ProductSlice = {
   allProducts: [],
@@ -27,7 +28,7 @@ export const productSlice = createSlice({
         return { ...state, wishlist: updatedList };
       }
     },
-    addCategories: (state, action: PayloadAction<string[]>) => {
+    addCategories: (state, action: PayloadAction<Category[]>) => {
       return { ...state, categories: action.payload };
     },
     addProducts: (state, action: PayloadAction<Product[]>) => {