admin
9e3cc99bed
- Core infrastructure: Zustand store, API client with mock fallback - Mode detection: Port 8080 (kiosk) / 9090 (remote) - Dashboard components: RainfallCard, ClockDisplay, CommStatus - Header components: VoltageDisplay, BatteryStatus, LoginIndicator - Data polling with visibility awareness - Bundle size: ~100KB gzipped Also adds README.md and WIKI.md documentation
41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
|
|
import { Info } from "lucide-react";
|
|
|
|
export function StationInfoView() {
|
|
const stationInfo = [
|
|
{ label: "Station ID", value: "STN-001" },
|
|
{ label: "Location", value: "North Sector A" },
|
|
{ label: "Latitude", value: "14.5995° N" },
|
|
{ label: "Longitude", value: "120.9842° E" },
|
|
{ label: "Altitude", value: "15 m" },
|
|
{ label: "Installation Date", value: "2024-01-15" },
|
|
{ label: "Last Maintenance", value: "2026-02-20" },
|
|
{ label: "Serial Number", value: "DS-2024-001-A" },
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-3">
|
|
<Info className="w-6 h-6 text-blue-400" />
|
|
<h1 className="text-2xl font-bold text-white">Station Information</h1>
|
|
</div>
|
|
|
|
<Card className="bg-gray-900 border-gray-700">
|
|
<CardHeader>
|
|
<CardTitle className="text-white">Station Details</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{stationInfo.map((info) => (
|
|
<div key={info.label} className="p-3 bg-gray-800 rounded">
|
|
<div className="text-xs text-gray-400 mb-1">{info.label}</div>
|
|
<div className="text-sm text-white font-semibold">{info.value}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|