78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
|
|
interface MetarTableProps {
|
|
data: any[];
|
|
loading: boolean;
|
|
}
|
|
|
|
export function MetarTable({ data, loading }: MetarTableProps) {
|
|
if (loading) {
|
|
return <LoadingSkeleton />;
|
|
}
|
|
|
|
return (
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Airport</TableHead>
|
|
<TableHead>Conditions</TableHead>
|
|
<TableHead>RWY</TableHead>
|
|
<TableHead>Wind (°/kts)</TableHead>
|
|
<TableHead>Headwind (kts)</TableHead>
|
|
<TableHead>Xwind (kts)</TableHead>
|
|
<TableHead>Altimeter</TableHead>
|
|
<TableHead>METAR</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{data.map((row, index) => (
|
|
<TableRow key={index}>
|
|
<TableCell className="font-medium">{row.airport}</TableCell>
|
|
<TableCell className={`text-${row.flightRulesClass}`}>
|
|
{row.flightRules}
|
|
</TableCell>
|
|
<TableCell className={row.runwayClass}>{row.bestRunway}</TableCell>
|
|
<TableCell>{row.wind}</TableCell>
|
|
<TableCell className={`wind-${row.headwindClass}`}>
|
|
{row.headwind}
|
|
</TableCell>
|
|
<TableCell className={`wind-${row.crosswindClass}`}>
|
|
{row.crosswind}
|
|
</TableCell>
|
|
<TableCell>{row.altimeter}</TableCell>
|
|
<TableCell className="font-mono text-sm">{row.metar}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
);
|
|
}
|
|
|
|
function LoadingSkeleton() {
|
|
return (
|
|
<div className="space-y-3 p-4">
|
|
{Array.from({ length: 5 }).map((_, i) => (
|
|
<div key={i} className="flex gap-4">
|
|
<Skeleton className="h-4 w-[100px]" />
|
|
<Skeleton className="h-4 w-[80px]" />
|
|
<Skeleton className="h-4 w-[60px]" />
|
|
<Skeleton className="h-4 w-[100px]" />
|
|
<Skeleton className="h-4 w-[80px]" />
|
|
<Skeleton className="h-4 w-[80px]" />
|
|
<Skeleton className="h-4 w-[80px]" />
|
|
<Skeleton className="h-4 w-[200px]" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
} |