assets added based on categoryin builder

app/src/components/layout/sidebarLeft/Assets.tsx

@@ -1,13 +1,29 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Search from "../../ui/inputs/Search";
 import vehicle from "../../../assets/image/vehicles.png";
 import workStation from "../../../assets/image/workStation.png";
 import machines from "../../../assets/image/machines.png";
 import feneration from "../../../assets/image/feneration.png";
 import worker from "../../../assets/image/worker.png";
+import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets/getCategoryAsset";
+
+interface AssetProp {
+  filename: string;
+  thumbnail: string;
+  category: string;
+  description: string;
+  tags: string;
+  url: String;
+  uploadDate: number;
+  isArchieve: boolean;
+  animated: boolean;
+  price: number;
+  CreatedBy: String;
+}
 const Assets: React.FC = () => {
   const [searchValue, setSearchValue] = useState<string>("");
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const [filteredAsset, setFilteredAsset] = useState<AssetProp[]>([]);
 
   const handleSearchChange = (value: string) => {
     setSearchValue(value);
@@ -34,56 +50,18 @@ const Assets: React.FC = () => {
       categoryImage: feneration,
     },
     {
-      assetName: "Forklift",
-      assetImage: "",
       category: "Vehicles",
       categoryImage: vehicle,
     },
     {
-      assetName: "AGV",
-      assetImage: "",
-      category: "Vehicles",
-      categoryImage: vehicle,
-    },
-    {
-      assetName: "Pallet",
-      assetImage: "",
       category: "Workstation",
       categoryImage: workStation,
     },
     {
-      assetName: "Controller",
-      assetImage: "",
-      category: "Workstation",
-      categoryImage: workStation,
-    },
-    {
-      assetName: "Conveyor",
-      assetImage: "",
-      category: "Workstation",
-      categoryImage: workStation,
-    },
-    {
-      assetName: "VMC",
-      assetImage: "",
       category: "Machines",
       categoryImage: machines,
     },
     {
-      assetName: "CMC",
-      assetImage: "",
-      category: "Machines",
-      categoryImage: machines,
-    },
-    {
-      assetName: "Male Worker",
-      assetImage: "",
-      category: "Workers",
-      categoryImage: worker,
-    },
-    {
-      assetName: "Female Worker",
-      assetImage: "",
       category: "Workers",
       categoryImage: worker,
     },
@@ -94,12 +72,13 @@ const Assets: React.FC = () => {
     new Set(categoryList.map((asset) => asset.category))
   );
 
-  // Filter assets based on the selected category
-  const filteredAssets =
-    selectedCategory !== null
-      ? categoryList.filter((asset) => asset.category === selectedCategory)
-      : [];
-
+  const fetchCategoryAssets = async (asset: any) => {
+    try {
+      setSelectedCategory(asset);
+      const res = await getCategoryAsset(asset);
+      setFilteredAsset(res);
+    } catch (error) {}
+  };
   return (
     <div className="assets-container">
       <Search onChange={handleSearchChange} />
@@ -118,16 +97,17 @@ const Assets: React.FC = () => {
           </div>
           <h2>{selectedCategory}</h2>
           <div className="assets-container">
-            {filteredAssets.map((asset, index) => (
-              <div key={index} className="assets">
-                <img
-                  src={asset.assetImage}
-                  alt={asset.assetName}
-                  className="asset-image"
-                />
-                <div className="asset-name">{asset.assetName}</div>
-              </div>
-            ))}
+            {filteredAsset &&
+              filteredAsset?.map((asset: any, index: number) => (
+                <div key={index} className="assets">
+                  <img
+                    src={asset.thumbnail}
+                    alt={asset.filename}
+                    className="asset-image"
+                  />
+                  <div className="asset-name">{asset.filename}</div>
+                </div>
+              ))}
           </div>
         </div>
       ) : (
@@ -142,7 +122,7 @@ const Assets: React.FC = () => {
                 <div
                   key={index}
                   className="category"
-                  onClick={() => setSelectedCategory(category)}
+                  onClick={() => fetchCategoryAssets(category)}
                 >
                   <img
                     src={categoryInfo?.categoryImage || ""}
@@ -161,4 +141,3 @@ const Assets: React.FC = () => {
 };
 
 export default Assets;
-