Refactor code structure for improved readability and maintainability

This commit is contained in:
Vishnu 2025-05-07 08:57:31 +05:30
parent f7d0151b00
commit cb483b4ded
9 changed files with 120 additions and 103 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

View File

@ -1,4 +1,4 @@
import React, { useEffect, useMemo, 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 arch from "../../../assets/gltf-glb/arch.glb";
@ -11,8 +11,13 @@ import { useSelectedItem } from "../../../store/store";
import vehicle from "../../../assets/image/categories/vehicles.png"; import vehicle from "../../../assets/image/categories/vehicles.png";
import workStation from "../../../assets/image/categories/workStation.png"; import workStation from "../../../assets/image/categories/workStation.png";
import machines from "../../../assets/image/categories/machines.png"; import machines from "../../../assets/image/categories/machines.png";
import feneration from "../../../assets/image/categories/feneration.png";
import worker from "../../../assets/image/categories/worker.png"; import worker from "../../../assets/image/categories/worker.png";
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";
// ------------------------------------- // -------------------------------------
interface AssetProp { interface AssetProp {
@ -21,12 +26,12 @@ interface AssetProp {
category: string; category: string;
description?: string; description?: string;
tags: string; tags: string;
url?: String; url?: string;
uploadDate?: number; uploadDate?: number;
isArchieve?: boolean; isArchieve?: boolean;
animated?: boolean; animated?: boolean;
price?: number; price?: number;
CreatedBy?: String; CreatedBy?: string;
} }
interface CategoryListProp { interface CategoryListProp {
assetImage?: string; assetImage?: string;
@ -102,6 +107,9 @@ const Assets: React.FC = () => {
{ category: "Workstation", categoryImage: workStation }, { category: "Workstation", categoryImage: workStation },
{ category: "Machines", categoryImage: machines }, { category: "Machines", categoryImage: machines },
{ category: "Workers", categoryImage: worker }, { category: "Workers", categoryImage: worker },
{ category: "Storage", categoryImage: storage },
{ category: "Safety", categoryImage: safety },
{ category: "Office", categoryImage: office },
]); ]);
}, []); }, []);
const fetchCategoryAssets = async (asset: any) => { const fetchCategoryAssets = async (asset: any) => {
@ -112,6 +120,7 @@ const Assets: React.FC = () => {
filename: "arch", filename: "arch",
category: "Feneration", category: "Feneration",
url: arch, url: arch,
thumbnail: archThumbnail,
tags: "arch", tags: "arch",
}, },
{ {
@ -125,6 +134,7 @@ const Assets: React.FC = () => {
filename: "window", filename: "window",
category: "Feneration", category: "Feneration",
url: window, url: window,
thumbnail: windowThumbnail,
tags: "window", tags: "window",
}, },
]; ];
@ -135,7 +145,9 @@ const Assets: React.FC = () => {
const res = await getCategoryAsset(asset); const res = await getCategoryAsset(asset);
setCategoryAssets(res); setCategoryAssets(res);
setFiltereredAssets(res); setFiltereredAssets(res);
} catch (error) {} } catch (error) {
console.log(error);
}
} }
}; };
return ( return (
@ -150,8 +162,7 @@ const Assets: React.FC = () => {
<p>Results for {searchValue}</p> <p>Results for {searchValue}</p>
</div> </div>
<div className="assets-container"> <div className="assets-container">
{categoryAssets && {categoryAssets?.map((asset: any, index: number) => (
categoryAssets?.map((asset: any, index: number) => (
<div <div
key={index} key={index}
className="assets" className="assets"
@ -178,7 +189,9 @@ const Assets: React.FC = () => {
</div> </div>
</div> </div>
</div> </div>
) : selectedCategory ? ( ) : (
<>
{selectedCategory ? (
<div className="assets-wrapper"> <div className="assets-wrapper">
<h2> <h2>
{selectedCategory}{" "} {selectedCategory}{" "}
@ -217,7 +230,6 @@ const Assets: React.FC = () => {
}); });
}} }}
/> />
<div className="asset-name"> <div className="asset-name">
{asset.filename {asset.filename
.split("_") .split("_")
@ -261,6 +273,8 @@ const Assets: React.FC = () => {
</div> </div>
</div> </div>
)} )}
</>
)}
</section> </section>
</div> </div>
</div> </div>

View File

@ -516,7 +516,6 @@ input[type="number"] {
-webkit-appearance: none; -webkit-appearance: none;
width: 100%; width: 100%;
height: 6px; height: 6px;
background: var(--background-color-secondary);
border-radius: #{$border-radius-medium}; border-radius: #{$border-radius-medium};
outline: none; outline: none;
margin: 12px 8px; margin: 12px 8px;

View File

@ -1275,49 +1275,49 @@
} }
&:nth-child(1), &:nth-child(1),
&:nth-child(9) { &:nth-child(8) {
&::after { &::after {
@include gradient-by-child(1); // First child uses the first color @include gradient-by-child(1); // First child uses the first color
} }
} }
&:nth-child(2), &:nth-child(2),
&:nth-child(10) { &:nth-child(9) {
&::after { &::after {
@include gradient-by-child(2); // Second child uses the second color @include gradient-by-child(2); // Second child uses the second color
} }
} }
&:nth-child(3), &:nth-child(3),
&:nth-child(11) { &:nth-child(10) {
&::after { &::after {
@include gradient-by-child(3); // Third child uses the third color @include gradient-by-child(3); // Third child uses the third color
} }
} }
&:nth-child(4), &:nth-child(4),
&:nth-child(12) { &:nth-child(11) {
&::after { &::after {
@include gradient-by-child(4); // Fourth child uses the fourth color @include gradient-by-child(4); // Fourth child uses the fourth color
} }
} }
&:nth-child(5), &:nth-child(5),
&:nth-child(13) { &:nth-child(12) {
&::after { &::after {
@include gradient-by-child(5); // Fifth child uses the fifth color @include gradient-by-child(5); // Fifth child uses the fifth color
} }
} }
&:nth-child(6), &:nth-child(6),
&:nth-child(14) { &:nth-child(13) {
&::after { &::after {
@include gradient-by-child(6); // Fifth child uses the fifth color @include gradient-by-child(6); // Fifth child uses the fifth color
} }
} }
&:nth-child(7), &:nth-child(7),
&:nth-child(15) { &:nth-child(14) {
&::after { &::after {
@include gradient-by-child(7); // Fifth child uses the fifth color @include gradient-by-child(7); // Fifth child uses the fifth color
} }

View File

@ -212,7 +212,7 @@
background: var(--background-color); background: var(--background-color);
position: relative; position: relative;
padding: 0 10px; padding: 0 10px;
animation: scaleFadeIn 0.4s forwards;
.kebab { .kebab {
width: 30px; width: 30px;
height: 30px; height: 30px;
@ -237,7 +237,6 @@
gap: 6px; gap: 6px;
border-radius: #{$border-radius-small}; border-radius: #{$border-radius-small};
box-shadow: var(--box-shadow-medium); box-shadow: var(--box-shadow-medium);
.btn { .btn {
@ -390,7 +389,6 @@
width: 18px; width: 18px;
height: 18px; height: 18px;
border-radius: #{$border-radius-small}; border-radius: #{$border-radius-small};
} }
.active { .active {
@ -414,7 +412,6 @@
color: var(--background-color); color: var(--background-color);
border-radius: #{$border-radius-small}; border-radius: #{$border-radius-small};
.add-icon { .add-icon {
@include flex-center; @include flex-center;
transition: rotate 0.2s; transition: rotate 0.2s;
@ -434,7 +431,7 @@
path { path {
stroke: #f65648; stroke: #f65648;
strokeWidth: 1.3; strokewidth: 1.3;
} }
} }
} }
@ -530,7 +527,6 @@
height: 10px; height: 10px;
background: var(--primary-color); background: var(--primary-color);
border-radius: #{$border-radius-circle}; border-radius: #{$border-radius-circle};
} }
} }
} }
@ -553,7 +549,6 @@
border: none; border: none;
outline: none; outline: none;
border-radius: #{$border-radius-circle}; border-radius: #{$border-radius-circle};
} }
} }
} }
@ -615,7 +610,6 @@
gap: 6px; gap: 6px;
border-radius: #{$border-radius-small}; border-radius: #{$border-radius-small};
box-shadow: var(--box-shadow-medium); box-shadow: var(--box-shadow-medium);
.icon { .icon {
@ -954,3 +948,13 @@
transform: scaleY(0); transform: scaleY(0);
} }
} }
@keyframes scaleFadeIn {
from {
scale: 0;
opacity: 0;
}
to {
scale: 1;
opacity: 1;
}
}