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 </tr>
81 </thead>
82 <tbody>
83 {datasets.map((dataset, index) => (
84 <tr
85 key={`${dataset.name}-${dataset.version}`}
86 style={{
87 backgroundColor: index % 2 === 0 ? "white" : "#fafafa",
88 }}
89 >
90 <td
91 style={{
92 padding: "6px 12px",
93 borderBottom: "1px solid #ddd",
94 fontSize: "0.9rem",
95 }}
96 >
97 <Link
98 to={`/home?dataset=${encodeURIComponent(dataset.name)}`}
99 style={{
100 color: "#0066cc",
101 textDecoration: "none",
102 fontWeight: "500",
103 }}
104 >
105 {dataset.name}
106 </Link>
107 </td>
108 <td
109 style={{
110 padding: "6px 12px",
111 borderBottom: "1px solid #ddd",
112 fontSize: "0.9rem",
113 }}
114 >
115 {dataset.version}
116 </td>
117 <td
118 style={{
119 padding: "6px 12px",
120 borderBottom: "1px solid #ddd",
121 fontSize: "0.9rem",
122 }}
123 >
124 {dataset.description}
125 </td>
126 <td
127 style={{
128 padding: "6px 12px",
129 borderBottom: "1px solid #ddd",
130 fontSize: "0.9rem",
131 }}
132 >
133 {dataset.tags.map((tag) => (
134 <span
135 key={tag}
136 style={{
137 display: "inline-block",
138 backgroundColor: "#e1e1e1",
139 padding: "2px 6px",
140 borderRadius: "3px",
141 margin: "1px",
142 fontSize: "0.8rem",
143 }}
144 >
145 {tag}
146 </span>
147 ))}
148 </td>
149 <td
150 style={{
151 padding: "6px 12px",
152 borderBottom: "1px solid #ddd",
153 fontSize: "0.9rem",
154 }}
155 >
156 {dataset.source_file && (
157 <a
158 href={dataset.source_file}
159 target="_blank"
160 rel="noopener noreferrer"
161 style={{
162 color: "#0066cc",
163 textDecoration: "none",
164 }}
165 >
166 View Source
167 </a>
168 )}
169 </td>
170 </tr>
171 ))}
172 </tbody>
173 </table>
174 </div>
175 </div>
176 );
177}
179export default Datasets;