From 5d995b0a29dd4e3dd06bdede3da6273a2aa92f0a Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Tue, 13 May 2025 12:22:52 +0530
Subject: [PATCH] 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 | 13 ++++---------
 app/src/styles/layout/skeleton.scss              |  1 -
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/app/src/components/layout/sidebarLeft/Assets.tsx b/app/src/components/layout/sidebarLeft/Assets.tsx
index 677090b..f9e4bb5 100644
--- a/app/src/components/layout/sidebarLeft/Assets.tsx
+++ b/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>
diff --git a/app/src/styles/layout/skeleton.scss b/app/src/styles/layout/skeleton.scss
index 3f4fe24..9dbc069 100644
--- a/app/src/styles/layout/skeleton.scss
+++ b/app/src/styles/layout/skeleton.scss
@@ -1,5 +1,4 @@
 .skeleton-wrapper {
-  // max-width: 600px;
   margin: 0 auto;
   width: 100%;