functionality for grid distance

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

@@ -24,26 +24,42 @@ interface AssetProp {
   price?: number;
   CreatedBy?: String;
 }
+interface CategoryListProp {
+  assetImage?: string;
+  assetName?: string;
+  categoryImage: string;
+  category: string;
+}
 const Assets: React.FC = () => {
   const { setSelectedItem } = useSelectedItem();
   const [searchValue, setSearchValue] = useState<string>("");
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
   const [categoryAssets, setCategoryAssets] = useState<AssetProp[]>([]);
   const [filtereredAssets, setFiltereredAssets] = useState<AssetProp[]>([]);
+  const [categoryList, setCategoryList] = useState<CategoryListProp[]>([]);
 
   const handleSearchChange = (value: string) => {
+    const searchTerm = value.toLowerCase();
     setSearchValue(value);
-    setSelectedCategory(null);
-    const searchTerm = value.toLowerCase(); // Convert input to lowercase
+    if (searchTerm.trim() === "" && !selectedCategory) {
+      setCategoryAssets([]);
+      return;
+    }
     const filteredModels = filtereredAssets?.filter((model) => {
-      if (!model?.tags || !model?.filename) return false;
+      if (!model?.tags || !model?.filename || !model?.category) return false;
       if (searchTerm.startsWith(":") && searchTerm.length > 1) {
         const tagSearchTerm = searchTerm.slice(1);
         return model.tags.toLowerCase().includes(tagSearchTerm);
-      } else if (!searchTerm.startsWith(":")) {
+      } else if (selectedCategory) {
+        return (
+          model.category
+            .toLowerCase()
+            .includes(selectedCategory.toLowerCase()) &&
+          model.filename.toLowerCase().includes(searchTerm)
+        );
+      } else {
         return model.filename.toLowerCase().includes(searchTerm);
       }
-      return false;
     });
 
     setCategoryAssets(filteredModels);
@@ -56,10 +72,10 @@ const Assets: React.FC = () => {
       } catch {}
     };
     filteredAssets();
-  }, []);
+  }, [categoryAssets]);
 
-  const categoryList = useMemo(
-    () => [
+  useEffect(() => {
+    setCategoryList([
       {
         assetName: "Doors",
         assetImage: "",
@@ -82,10 +98,8 @@ const Assets: React.FC = () => {
       { category: "Workstation", categoryImage: workStation },
       { category: "Machines", categoryImage: machines },
       { category: "Workers", categoryImage: worker },
-    ],
-    []
-  );
-
+    ]);
+  }, []);
   const fetchCategoryAssets = async (asset: any) => {
     setSelectedCategory(asset);
     if (asset === "Feneration") {
@@ -127,7 +141,7 @@ const Assets: React.FC = () => {
         <div className="assets-result">
           <div className="assets-wrapper">
             <div className="searched-content">
-              <p>Results for "{searchValue}"</p>
+              <p>Results for {searchValue}</p>
             </div>
           </div>
           <div className="assets-container">
@@ -155,10 +169,12 @@ const Assets: React.FC = () => {
         </div>
       ) : selectedCategory ? (
         <div className="assets-wrapper">
-          {/* Back Button */}
           <div
             className="back-button"
-            onClick={() => setSelectedCategory(null)}
+            onClick={() => {
+              setSelectedCategory(null);
+              setCategoryAssets([]);
+            }}
           >
             ← Back
           </div>