A quick vibe-coded site to test response times of PLC.directory mirrors (over 3 attempts)
indexx.dev
1import { BenchmarkResult } from "@/types/benchmark";
2import {
3 Table,
4 TableBody,
5 TableCell,
6 TableHead,
7 TableHeader,
8 TableRow,
9} from "@/components/ui/table";
10import { Badge } from "@/components/ui/badge";
11import { CheckCircle2, XCircle } from "lucide-react";
12
13interface BenchmarkTableProps {
14 results: BenchmarkResult[];
15}
16
17export const BenchmarkTable = ({ results }: BenchmarkTableProps) => {
18 // Sort by response time (fastest first)
19 const sortedResults = [...results].sort((a, b) => {
20 if (a.status === "error" && b.status === "success") return 1;
21 if (a.status === "success" && b.status === "error") return -1;
22 return a.responseTime - b.responseTime;
23 });
24
25 return (
26 <div className="rounded-lg border border-border bg-card overflow-hidden">
27 <Table>
28 <TableHeader>
29 <TableRow className="bg-muted/50">
30 <TableHead className="font-semibold">Mirror</TableHead>
31 <TableHead className="font-semibold">URL</TableHead>
32 <TableHead className="font-semibold text-right">Response Time</TableHead>
33 <TableHead className="font-semibold">Status</TableHead>
34 <TableHead className="font-semibold">HTTP Code</TableHead>
35 </TableRow>
36 </TableHeader>
37 <TableBody>
38 {sortedResults.map((result, index) => (
39 <TableRow key={index} className="hover:bg-muted/30 transition-colors">
40 <TableCell className="font-medium">{result.mirrorName}</TableCell>
41 <TableCell className="font-mono text-sm text-muted-foreground">
42 {result.mirrorUrl}
43 </TableCell>
44 <TableCell className="text-right font-mono text-sm">
45 {result.status === "success" ? (
46 <span className="text-foreground font-medium">
47 {result.responseTime.toFixed(0)}ms
48 </span>
49 ) : (
50 <span className="text-muted-foreground">—</span>
51 )}
52 </TableCell>
53 <TableCell>
54 {result.status === "success" ? (
55 <Badge
56 variant="outline"
57 className="bg-success/10 text-success border-success/20 gap-1"
58 >
59 <CheckCircle2 className="w-3 h-3" />
60 Success
61 </Badge>
62 ) : (
63 <Badge
64 variant="outline"
65 className="bg-destructive/10 text-destructive border-destructive/20 gap-1"
66 >
67 <XCircle className="w-3 h-3" />
68 Error
69 </Badge>
70 )}
71 </TableCell>
72 <TableCell className="font-mono text-sm">
73 {result.statusCode ? (
74 <span
75 className={
76 result.statusCode >= 200 && result.statusCode < 300
77 ? "text-success"
78 : "text-destructive"
79 }
80 >
81 {result.statusCode}
82 </span>
83 ) : (
84 <span className="text-muted-foreground">—</span>
85 )}
86 </TableCell>
87 </TableRow>
88 ))}
89 </TableBody>
90 </Table>
91 {sortedResults.length === 0 && (
92 <div className="text-center py-12 text-muted-foreground">
93 No results yet. Enter a DID and run the benchmark.
94 </div>
95 )}
96 </div>
97 );
98};