1import { Dataset } from "../types";
2import { Link } from "react-router-dom";
4interface DatasetsProps {
5 datasets: Dataset[];
6}
8function Datasets({ datasets }: DatasetsProps) {
9 return (
10 <div>
11 <h1
12 style={{
13 fontSize: "2rem",
14 fontWeight: "bold",
15 color: "#333",
16 marginBottom: "1rem",
17 }}
18 >
19 Benchmark Datasets
20 </h1>
21 <div style={{ overflowX: "auto" }}>
22 <table style={{ width: "100%", borderCollapse: "collapse" }}>
23 <thead>
24 <tr style={{ backgroundColor: "#f5f5f5" }}>
25 <th
26 style={{
27 padding: "8px 12px",
28 textAlign: "left",
29 borderBottom: "1px solid #ddd",
30 fontSize: "0.9rem",
31 whiteSpace: "nowrap",
32 }}
33 >
34 Name
35 </th>
36 <th
37 style={{
38 padding: "8px 12px",
39 textAlign: "left",
40 borderBottom: "1px solid #ddd",
41 fontSize: "0.9rem",
42 whiteSpace: "nowrap",
43 }}
44 >
45 Version
46 </th>
47 <th
48 style={{
49 padding: "8px 12px",
50 textAlign: "left",
51 borderBottom: "1px solid #ddd",
52 fontSize: "0.9rem",
53 whiteSpace: "nowrap",
54 }}
55 >
56 Description
57 </th>
58 <th
59 style={{
60 padding: "8px 12px",
61 textAlign: "left",
62 borderBottom: "1px solid #ddd",
63 fontSize: "0.9rem",
64 whiteSpace: "nowrap",
65 }}
66 >
67 Tags
68 </th>
69 <th
70 style={{
71 padding: "8px 12px",
72 textAlign: "left",
73 borderBottom: "1px solid #ddd",
74 fontSize: "0.9rem",
75 whiteSpace: "nowrap",
76 }}
77 >
78 Source
79 </th>
80 <th
81 style={{
82 padding: "8px 12px",
83 textAlign: "left",
84 borderBottom: "1px solid #ddd",
85 fontSize: "0.9rem",
86 whiteSpace: "nowrap",
87 }}
88 >
89 Data
90 </th>
91 </tr>
92 </thead>
93 <tbody>
94 {datasets.map((dataset, index) => (
95 <tr
96 key={`${dataset.name}-${dataset.version}`}
97 style={{
98 backgroundColor: index % 2 === 0 ? "white" : "#fafafa",
99 }}
100 >
101 <td
102 style={{
103 padding: "6px 12px",
104 borderBottom: "1px solid #ddd",
105 fontSize: "0.9rem",
106 }}
107 >
108 <Link
109 to={`/dataset/${encodeURIComponent(dataset.name)}`}
110 style={{
111 color: "#0066cc",
112 textDecoration: "none",
113 fontWeight: "500",
114 }}
115 >
116 {dataset.name}
117 </Link>
118 </td>
119 <td
120 style={{
121 padding: "6px 12px",
122 borderBottom: "1px solid #ddd",
123 fontSize: "0.9rem",
124 }}
125 >
126 {dataset.version}
127 </td>
128 <td
129 style={{
130 padding: "6px 12px",
131 borderBottom: "1px solid #ddd",
132 fontSize: "0.9rem",
133 }}
134 >
135 {dataset.description}
136 </td>
137 <td
138 style={{
139 padding: "6px 12px",
140 borderBottom: "1px solid #ddd",
141 fontSize: "0.9rem",
142 }}
143 >
144 {dataset.tags.map((tag) => (
145 <span
146 key={tag}
147 style={{
148 display: "inline-block",
149 backgroundColor: "#e1e1e1",
150 padding: "2px 6px",
151 borderRadius: "3px",
152 margin: "1px",
153 fontSize: "0.8rem",
154 }}
155 >
156 {tag}
157 </span>
158 ))}
159 </td>
160 <td
161 style={{
162 padding: "6px 12px",
163 borderBottom: "1px solid #ddd",
164 fontSize: "0.9rem",
165 }}
166 >
167 {dataset.source_file && (
168 <a
169 href={dataset.source_file}
170 target="_blank"
171 rel="noopener noreferrer"
172 style={{
173 color: "#0066cc",
174 textDecoration: "none",
175 }}
176 >
177 View Source
178 </a>
179 )}
180 </td>
181 <td
182 style={{
183 padding: "6px 12px",
184 borderBottom: "1px solid #ddd",
185 fontSize: "0.9rem",
186 }}
187 >
188 {dataset.data_url_npy && (
189 <a
190 href={dataset.data_url_npy}
191 download={`${dataset.name}-${dataset.version}.npy`}
192 style={{
193 color: "#0066cc",
194 textDecoration: "none",
195 }}
196 >
197 Download
198 </a>
199 )}
200 </td>
201 </tr>
202 ))}
203 </tbody>
204 </table>
205 </div>
206 </div>
207 );
208}
210export default Datasets;