36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo, useState } from "react";
|
|
import type { Vehicle } from "@/payload-types";
|
|
import { VehicleCard } from "@/components/frontend/logistics/VehicleCard";
|
|
import { VehicleFilters } from "@/components/frontend/logistics/VehicleFilters";
|
|
|
|
const categories = ["civilian", "utility", "transport", "weaponized", "military"];
|
|
|
|
export function VehiclesList({ vehicles }: { vehicles: Vehicle[] }) {
|
|
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
|
|
|
const filtered = useMemo(() => {
|
|
if (!selectedCategory) return vehicles;
|
|
return vehicles.filter((v) =>
|
|
v.category?.includes(selectedCategory as NonNullable<Vehicle["category"]>[number]),
|
|
);
|
|
}, [vehicles, selectedCategory]);
|
|
|
|
return (
|
|
<>
|
|
<VehicleFilters categories={categories} onFilterChange={setSelectedCategory} />
|
|
{filtered.length > 0 ? (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
|
{filtered.map((vehicle) => (
|
|
<VehicleCard key={vehicle.id} vehicle={vehicle as any} />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground italic">
|
|
No vehicles match the selected filters.
|
|
</p>
|
|
)}
|
|
</>
|
|
);
|
|
}
|