Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Vishnu 2025-05-13 12:22:52 +05:30
parent 59a3cb4704
commit 5d995b0a29
2 changed files with 4 additions and 10 deletions
app/src
components/layout/sidebarLeft
Assets.tsx
styles/layout
skeleton.scss

13
app/src/components/layout/sidebarLeft/Assets.tsx
View File

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

1
app/src/styles/layout/skeleton.scss vendored
View File

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