searching filtered assets

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

@@ -9,12 +9,13 @@ import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets
 import arch from "../../../assets/gltf-glb/arch.glb";
 import door from "../../../assets/gltf-glb/door.glb";
 import window from "../../../assets/gltf-glb/window.glb";
+import { fetchAssets } from "../../../services/marketplace/fetchAssets";
 interface AssetProp {
   filename: string;
   thumbnail?: string;
   category: string;
   description?: string;
-  tags?: string;
+  tags: string;
   url?: String;
   uploadDate?: number;
   isArchieve?: boolean;
@@ -25,12 +26,27 @@ interface AssetProp {
 const Assets: React.FC = () => {
   const [searchValue, setSearchValue] = useState<string>("");
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
-  const [filteredAsset, setFilteredAsset] = useState<AssetProp[]>([]);
+  const [categoryAssets, setCategoryAssets] = useState<AssetProp[]>([]);
+  const [filtereredAssets, setFiltereredAssets] = useState<AssetProp[]>([]);
 
   const handleSearchChange = (value: string) => {
     setSearchValue(value);
-    setSelectedCategory(null); // Reset selected category when search changes
+    setSelectedCategory(null);
+    const filteredModels = filtereredAssets?.filter((model) =>
+      model.filename.toLowerCase().includes(value.toLowerCase())
+    );
+
+    setCategoryAssets(filteredModels);
   };
+  useEffect(() => {
+    const filteredAssets = async () => {
+      try {
+        const filt = await fetchAssets();
+        setFiltereredAssets(filt);
+      } catch {}
+    };
+    filteredAssets();
+  }, []);
 
   const categoryList = useMemo(
     () => [
@@ -68,56 +84,53 @@ const Assets: React.FC = () => {
           filename: "arch",
           category: "Feneration",
           url: arch,
+          tags: "arch",
         },
         {
           filename: "door",
           category: "Feneration",
           url: door,
+          thumbnail: feneration,
+          tags: "door",
         },
         {
           filename: "window",
           category: "Feneration",
           url: window,
+          tags: "window",
         },
       ];
-      setFilteredAsset(localAssets);
+      setCategoryAssets(localAssets);
+      setFiltereredAssets(localAssets);
     } else {
       try {
         const res = await getCategoryAsset(asset);
-        setFilteredAsset(res || []); // Ensure it's always an array
+        setCategoryAssets(res || []); // Ensure it's always an array
+        setFiltereredAssets(res || []);
       } catch (error) {}
     }
   };
 
-  useEffect(() => {}, [filteredAsset]);
   return (
     <div className="assets-container">
       <Search onChange={handleSearchChange} />
       {searchValue ? (
-        <div className="searched-content">
-          <p>Results for "{searchValue}"</p>
-        </div>
-      ) : selectedCategory ? (
-        <div className="assets-wrapper">
-          {/* Back Button */}
-          <div
-            className="back-button"
-            onClick={() => setSelectedCategory(null)}
-          >
-            ← Back
+        <div className="assets-result">
+          <div className="assets-wrapper">
+            <div className="searched-content">
+              <p>Results for "{searchValue}"</p>
+            </div>
           </div>
-          <h2>{selectedCategory}</h2>
           <div className="assets-container">
-            {filteredAsset &&
-              filteredAsset?.map((asset: any, index: number) => (
+            {categoryAssets &&
+              categoryAssets?.map((asset: any, index: number) => (
                 <div key={index} className="assets">
-                  {asset?.thumbnail && (
-                    <img
-                      src={asset?.thumbnail}
-                      alt={asset.filename}
-                      className="asset-image"
-                    />
-                  )}
+                  <img
+                    src={asset?.thumbnail}
+                    alt={asset.filename}
+                    className="asset-image"
+                  />
+
                   <div className="asset-name">
                     {asset.filename
                       .split("_")
@@ -131,6 +144,43 @@ const Assets: React.FC = () => {
               ))}
           </div>
         </div>
+      ) : selectedCategory ? (
+        <div className="assets-wrapper">
+          {/* Back Button */}
+          <div
+            className="back-button"
+            onClick={() => {
+              setSelectedCategory(null);
+              setCategoryAssets([]);
+            }}
+          >
+            ← Back
+          </div>
+          <h2>{selectedCategory}</h2>
+          <div className="assets-container">
+            {searchValue ||
+              (categoryAssets &&
+                categoryAssets?.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
+                        .split("_")
+                        .map(
+                          (word: any) =>
+                            word.charAt(0).toUpperCase() + word.slice(1)
+                        )
+                        .join(" ")}
+                    </div>
+                  </div>
+                )))}
+          </div>
+        </div>
       ) : (
         <div className="assets-wrapper">
           <h2>Categories</h2>