1import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
2import { useEffect, useState } from "react";
3import axios from "axios";
4import Home from "./pages/Home";
5import Datasets from "./pages/Datasets";
6import Algorithms from "./pages/Algorithms";
7import About from "./pages/About";
8import { BenchmarkData } from "./types";
10function App() {
11 const [benchmarkData, setBenchmarkData] = useState<BenchmarkData | null>(
12 null,
13 );
14 const [isLoading, setIsLoading] = useState(true);
15 const [error, setError] = useState<string | null>(null);
17 useEffect(() => {
18 const fetchData = async () => {
19 try {
20 setIsLoading(true);
21 setError(null);
22 const response = await axios.get(
23 "https://raw.githubusercontent.com/magland/zia/benchmark-results/benchmark_results/results.json",
24 );
25 setBenchmarkData(response.data);
26 } catch (error) {
27 const message =
28 error instanceof Error ? error.message : "Failed to fetch data";
29 setError(message);
30 console.error("Error fetching benchmark data:", error);
31 } finally {
32 setIsLoading(false);
33 }
34 };
36 fetchData();
37 }, []);
39 return (
40 <BrowserRouter basename="/zia">
41 <div
42 style={{
43 paddingTop: "5rem",
44 paddingLeft: "2rem",
45 paddingRight: "2rem",
46 paddingBottom: "2rem",
47 }}
48 >
49 <nav
50 style={{
51 position: "fixed",
52 top: 0,
53 left: 0,
54 right: 0,
55 padding: "1rem 2rem",
56 backgroundColor: "white",
57 borderBottom: "1px solid #eaeaea",
58 zIndex: 1000,
59 boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
60 }}
61 >
62 <ul
63 style={{
64 listStyle: "none",
65 padding: 0,
66 margin: 0,
67 display: "flex",
68 gap: "1.5rem",
69 }}
70 >
71 <li>
72 <Link
73 to="/home"
74 style={{
75 color: "#0066cc",
76 textDecoration: "none",
77 fontWeight: "500",
78 }}
79 >
80 Home
81 </Link>
82 </li>
83 <li>
84 <Link
85 to="/datasets"
86 style={{
87 color: "#0066cc",
88 textDecoration: "none",
89 fontWeight: "500",
90 }}
91 >
92 Datasets
93 </Link>
94 </li>
95 <li>
96 <Link
97 to="/algorithms"
98 style={{
99 color: "#0066cc",
100 textDecoration: "none",
101 fontWeight: "500",
102 }}
103 >
104 Algorithms
105 </Link>
106 </li>
107 <li>
108 <Link
109 to="/about"
110 style={{
111 color: "#0066cc",
112 textDecoration: "none",
113 fontWeight: "500",
114 }}
115 >
116 About
117 </Link>
118 </li>
119 </ul>
120 </nav>
121 <main>
122 {isLoading ? (
123 <div>Loading benchmark data...</div>
124 ) : error ? (
125 <div>Error: {error}</div>
126 ) : (
127 <Routes>
128 <Route
129 path="/home"
130 element={<Home benchmarkData={benchmarkData} />}
131 />
132 <Route
133 path="/"
134 element={<Home benchmarkData={benchmarkData} />}
135 />
136 <Route
137 path="/datasets"
138 element={<Datasets datasets={benchmarkData?.datasets || []} />}
139 />
140 <Route
141 path="/algorithms"
142 element={
143 <Algorithms algorithms={benchmarkData?.algorithms || []} />
144 }
145 />
146 <Route path="/about" element={<About />} />
147 </Routes>
148 )}
149 </main>
150 </div>
151 </BrowserRouter>
152 );
153}
155export default App;