4interface DatasetsProps {
5 datasets: Dataset[];
6}
8function Datasets({ datasets }: DatasetsProps) {
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>
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 </tr>
62 </thead>
63 <tbody>
64 {datasets.map((dataset, index) => (
65 <tr
66 key={`${dataset.name}-${dataset.version}`}
67 style={{
68 backgroundColor: index % 2 === 0 ? "white" : "#fafafa",
69 }}
70 >
71 <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
73 to={`/home?dataset=${encodeURIComponent(dataset.name)}`}
74 style={{
75 color: "#0066cc",
76 textDecoration: "none",
77 fontWeight: "500",
78 }}
79 >
80 {dataset.name}
81 </Link>
83 <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
84 {dataset.version}
85 </td>
86 <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
87 {dataset.description}
88 </td>
89 <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
90 {dataset.tags.map((tag) => (
91 <span
92 key={tag}
93 style={{
94 display: "inline-block",
95 backgroundColor: "#e1e1e1",
96 padding: "4px 8px",
97 borderRadius: "4px",
98 margin: "2px",
99 fontSize: "0.9em",
100 }}
101 >
102 {tag}
103 </span>
104 ))}
105 </td>
106 </tr>
107 ))}
108 </tbody>
109 </table>
111 </div>
112 );
113}
115export default Datasets;