import React, { useState } from "react"; 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"; const Assets: React.FC = () => { const [searchValue, setSearchValue] = useState(""); const [selectedCategory, setSelectedCategory] = useState(null); const handleSearchChange = (value: string) => { setSearchValue(value); setSelectedCategory(null); // Reset selected category when search changes }; const categoryList = [ { assetName: "Doors", assetImage: "", category: "Feneration", categoryImage: feneration, }, { assetName: "Windows", assetImage: "", category: "Feneration", categoryImage: feneration, }, { assetName: "Pillars", assetImage: "", category: "Feneration", categoryImage: feneration, }, { assetName: "Forklift", assetImage: "", category: "Vehicles", categoryImage: vehicle, }, { assetName: "AGV", assetImage: "", category: "Vehicles", categoryImage: vehicle, }, { assetName: "Pallet", assetImage: "", category: "Workstation", categoryImage: workStation, }, { assetName: "Controller", assetImage: "", category: "Workstation", categoryImage: workStation, }, { assetName: "Conveyor", assetImage: "", category: "Workstation", categoryImage: workStation, }, { assetName: "VMC", assetImage: "", category: "Machines", categoryImage: machines, }, { assetName: "CMC", assetImage: "", category: "Machines", categoryImage: machines, }, { assetName: "Male Worker", assetImage: "", category: "Workers", categoryImage: worker, }, { assetName: "Female Worker", assetImage: "", category: "Workers", categoryImage: worker, }, ]; // Get unique categories const uniqueCategories = Array.from( new Set(categoryList.map((asset) => asset.category)) ); // Filter assets based on the selected category const filteredAssets = selectedCategory !== null ? categoryList.filter((asset) => asset.category === selectedCategory) : []; return (
{searchValue ? (

Results for "{searchValue}"

) : selectedCategory ? (
{/* Back Button */}
setSelectedCategory(null)} > ← Back

{selectedCategory}

{filteredAssets.map((asset, index) => (
{asset.assetName}
{asset.assetName}
))}
) : (

Categories

{uniqueCategories.map((category, index) => { const categoryInfo = categoryList.find( (asset) => asset.category === category ); return (
setSelectedCategory(category)} > {category}
{category}
); })}
)}
); }; export default Assets;