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: "12px",
28 textAlign: "left",
29 borderBottom: "2px solid #ddd",
30 }}
31 >
32 Name
33 </th>
34 <th
35 style={{
36 padding: "12px",
37 textAlign: "left",
38 borderBottom: "2px solid #ddd",
39 }}
40 >
41 Version
42 </th>
43 <th
44 style={{
45 padding: "12px",
46 textAlign: "left",
47 borderBottom: "2px solid #ddd",
48 }}
49 >
50 Description
51 </th>
52 <th
53 style={{
54 padding: "12px",
55 textAlign: "left",
56 borderBottom: "2px solid #ddd",
57 }}
58 >
59 Tags
60 </th>
61 <th
62 style={{
63 padding: "12px",
64 textAlign: "left",
65 borderBottom: "2px solid #ddd",
66 }}
67 >
68 Source
69 </th>
70 </tr>
71 </thead>
72 <tbody>
73 {datasets.map((dataset, index) => (
74 <tr
75 key={`${dataset.name}-${dataset.version}`}
76 style={{
77 backgroundColor: index % 2 === 0 ? "white" : "#fafafa",
78 }}
79 >
80 <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
81 <Link
82 to={`/home?dataset=${encodeURIComponent(dataset.name)}`}
83 style={{
84 color: "#0066cc",
85 textDecoration: "none",
86 fontWeight: "500",
87 }}
88 >
89 {dataset.name}
90 </Link>
91 </td>
92 <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
93 {dataset.version}
94 </td>
95 <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
96 {dataset.description}
97 </td>
98 <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
99 {dataset.tags.map((tag) => (
100 <span
101 key={tag}
102 style={{
103 display: "inline-block",
104 backgroundColor: "#e1e1e1",
105 padding: "4px 8px",
106 borderRadius: "4px",
107 margin: "2px",
108 fontSize: "0.9em",
109 }}
110 >
111 {tag}
112 </span>
113 ))}
114 </td>
115 <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
116 {dataset.source_file && (
117 <a
118 href={dataset.source_file}
119 target="_blank"
120 rel="noopener noreferrer"
121 style={{
122 color: "#0066cc",
123 textDecoration: "none",
124 }}
125 >
126 View Source
127 </a>
128 )}
129 </td>
130 </tr>
131 ))}
132 </tbody>
133 </table>
134 </div>
135 </div>
136 );
137}
139export default Datasets;