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

144 lines
4.2 KiB
TypeScript
Raw Normal View History

import React, { useEffect, useState } from "react";
2025-03-25 06:17:41 +00:00
import Search from "../../ui/inputs/Search";
import vehicle from "../../../assets/image/vehicles.png";
import workStation from "../../../assets/image/workStation.png";
import machines from "../../../assets/image/machines.png";
import feneration from "../../../assets/image/feneration.png";
import worker from "../../../assets/image/worker.png";
import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets/getCategoryAsset";
interface AssetProp {
filename: string;
thumbnail: string;
category: string;
description: string;
tags: string;
url: String;
uploadDate: number;
isArchieve: boolean;
animated: boolean;
price: number;
CreatedBy: String;
}
2025-03-25 06:17:41 +00:00
const Assets: React.FC = () => {
const [searchValue, setSearchValue] = useState<string>("");
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
const [filteredAsset, setFilteredAsset] = useState<AssetProp[]>([]);
2025-03-25 06:17:41 +00:00
const handleSearchChange = (value: string) => {
setSearchValue(value);
setSelectedCategory(null); // Reset selected category when search changes
2025-03-25 06:17:41 +00:00
};
const categoryList = [
{
assetName: "Doors",
assetImage: "",
category: "Feneration",
categoryImage: feneration,
},
{
assetName: "Windows",
assetImage: "",
category: "Feneration",
categoryImage: feneration,
},
{
assetName: "Pillars",
assetImage: "",
category: "Feneration",
categoryImage: feneration,
},
{
category: "Vehicles",
categoryImage: vehicle,
},
{
category: "Workstation",
categoryImage: workStation,
},
{
category: "Machines",
categoryImage: machines,
},
{
category: "Workers",
categoryImage: worker,
},
];
// Get unique categories
const uniqueCategories = Array.from(
new Set(categoryList.map((asset) => asset.category))
);
const fetchCategoryAssets = async (asset: any) => {
try {
setSelectedCategory(asset);
const res = await getCategoryAsset(asset);
setFilteredAsset(res);
} catch (error) {}
};
2025-03-25 06:17:41 +00:00
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>
<h2>{selectedCategory}</h2>
<div className="assets-container">
{filteredAsset &&
filteredAsset?.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}</div>
</div>
))}
</div>
</div>
2025-03-25 06:17:41 +00:00
) : (
<div className="assets-wrapper">
<h2>Categories</h2>
<div className="categories-container">
{uniqueCategories.map((category, index) => {
const categoryInfo = categoryList.find(
(asset) => asset.category === category
);
return (
<div
key={index}
className="category"
onClick={() => fetchCategoryAssets(category)}
>
<img
src={categoryInfo?.categoryImage || ""}
alt={category}
className="category-image"
/>
<div className="category-name">{category}</div>
</div>
);
})}
</div>
</div>
2025-03-25 06:17:41 +00:00
)}
</div>
);
};
export default Assets;