Refactor Assets component to improve asset key generation for better uniqueness; update category button structure for enhanced accessibility and interaction

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

@@ -1,9 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Search from "../../ui/inputs/Search";
 import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets/getCategoryAsset";
-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";
 import { useSelectedItem } from "../../../store/store";
 
@@ -16,8 +13,6 @@ import storage from "../../../assets/image/categories/storage.png";
 import office from "../../../assets/image/categories/office.png";
 import safety from "../../../assets/image/categories/safety.png";
 import feneration from "../../../assets/image/categories/feneration.png";
-import archThumbnail from "../../../assets/image/localAssets/arch.png";
-import windowThumbnail from "../../../assets/image/localAssets/window.png";
 import SkeletonUI from "../../templates/SkeletonUI";
 // -------------------------------------
 
@@ -135,7 +130,7 @@ const Assets: React.FC = () => {
                     <div className="assets-container">
                       {categoryAssets?.map((asset: any, index: number) => (
                         <div
-                          key={index}
+                          key={`${index}-${asset.filename}`}
                           className="assets"
                           id={asset.filename}
                           title={asset.filename}
@@ -235,8 +230,8 @@ const Assets: React.FC = () => {
                       (asset) => asset.category === category
                     );
                     return (
-                      <div
-                        key={index}
+                      <button
+                        key={`${index}-${category}`}
                         className="category"
                         id={category}
                         onClick={() => fetchCategoryAssets(category)}
@@ -248,7 +243,7 @@ const Assets: React.FC = () => {
                           draggable={false}
                         />
                         <div className="category-name">{category}</div>
-                      </div>
+                      </button>
                     );
                   })}
                 </div>

app/src/styles/layout/skeleton.scss

@@ -1,5 +1,4 @@
 .skeleton-wrapper {
-  // max-width: 600px;
   margin: 0 auto;
   width: 100%;