Dodo
56 lines
2.3 KiB
TypeScript
56 lines
2.3 KiB
TypeScript
import { Card } from "@/components/ui/card";
|
|
import { LayersIcon, RoadHorizonIcon, MapPinIcon } from "@/components/ui/phosphor-icons";
|
|
|
|
interface LandStatsCardsProps {
|
|
aggregateStats: {
|
|
totalParcelArea: string;
|
|
totalRoadLength: string;
|
|
activeMarkers: number;
|
|
};
|
|
}
|
|
|
|
export function LandStatsCards({ aggregateStats }: LandStatsCardsProps) {
|
|
return (
|
|
<>
|
|
<Card className="bg-background rounded-none border-none shadow-none ring-0 flex flex-col justify-between h-full">
|
|
<div className="px-6 pt-6 pb-4">
|
|
<div className="flex justify-between items-center pb-2">
|
|
<span className="text-xs font-medium text-muted-foreground">Total Parcel Area</span>
|
|
<LayersIcon className="h-4 w-4 text-emerald-500" />
|
|
</div>
|
|
<div className="text-3xl font-bold text-foreground mt-2">{aggregateStats.totalParcelArea} Ha</div>
|
|
</div>
|
|
<div className="border-t px-6 py-3 text-xs text-muted-foreground mt-auto">
|
|
Sum of all registered polygon parcels
|
|
</div>
|
|
</Card>
|
|
|
|
<Card className="bg-background rounded-none border-none shadow-none ring-0 flex flex-col justify-between h-full">
|
|
<div className="px-6 pt-6 pb-4">
|
|
<div className="flex justify-between items-center pb-2">
|
|
<span className="text-xs font-medium text-muted-foreground">Total Road Length</span>
|
|
<RoadHorizonIcon className="h-4 w-4 text-cobalt-glow" />
|
|
</div>
|
|
<div className="text-3xl font-bold text-foreground mt-2">{aggregateStats.totalRoadLength} km</div>
|
|
</div>
|
|
<div className="border-t px-6 py-3 text-xs text-muted-foreground mt-auto">
|
|
Sum of all measured road/line segments
|
|
</div>
|
|
</Card>
|
|
|
|
<Card className="bg-background rounded-none border-none shadow-none ring-0 flex flex-col justify-between h-full">
|
|
<div className="px-6 pt-6 pb-4">
|
|
<div className="flex justify-between items-center pb-2">
|
|
<span className="text-xs font-medium text-muted-foreground">Active Markers</span>
|
|
<MapPinIcon className="h-4 w-4 text-primary" />
|
|
</div>
|
|
<div className="text-3xl font-bold text-foreground mt-2">{aggregateStats.activeMarkers} Markers</div>
|
|
</div>
|
|
<div className="border-t px-6 py-3 text-xs text-muted-foreground mt-auto">
|
|
Land pins, survey flags, protected zones & registries
|
|
</div>
|
|
</Card>
|
|
</>
|
|
);
|
|
}
|