1import { Dataset } from "../types";
3interface DatasetsProps {
4 datasets: Dataset[];
5}
7function Datasets({ datasets }: DatasetsProps) {
8 return (
9 <div>
10 <h1
11 style={{
12 fontSize: "2rem",
13 fontWeight: "bold",
14 color: "#333",
15 marginBottom: "1rem",
16 }}
17 >
18 Benchmark Datasets
19 </h1>
20 <div style={{ overflowX: "auto" }}>
21 <table style={{ width: "100%", borderCollapse: "collapse" }}>
22 <thead>
23 <tr style={{ backgroundColor: "#f5f5f5" }}>
24 <th
25 style={{
26 padding: "12px",
27 textAlign: "left",
28 borderBottom: "2px solid #ddd",
29 }}
30 >
31 Name
32 </th>
33 <th
34 style={{
35 padding: "12px",
36 textAlign: "left",
37 borderBottom: "2px solid #ddd",
38 }}
39 >
40 Version
41 </th>
42 <th
43 style={{
44 padding: "12px",
45 textAlign: "left",
46 borderBottom: "2px solid #ddd",
47 }}
48 >
49 Description
50 </th>
51 <th
52 style={{
53 padding: "12px",
54 textAlign: "left",
55 borderBottom: "2px solid #ddd",
56 }}
57 >
58 Tags
59 </th>
60 </tr>
61 </thead>
62 <tbody>
63 {datasets.map((dataset, index) => (
64 <tr
65 key={`${dataset.name}-${dataset.version}`}
66 style={{
67 backgroundColor: index % 2 === 0 ? "white" : "#fafafa",
68 }}
69 >
70 <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
71 {dataset.name}
72 </td>
73 <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
74 {dataset.version}
75 </td>
76 <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
77 {dataset.description}
78 </td>
79 <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
80 {dataset.tags.map((tag) => (
81 <span
82 key={tag}
83 style={{
84 display: "inline-block",
85 backgroundColor: "#e1e1e1",
86 padding: "4px 8px",
87 borderRadius: "4px",
88 margin: "2px",
89 fontSize: "0.9em",
90 }}
91 >
92 {tag}
93 </span>
94 ))}
95 </td>
96 </tr>
97 ))}
98 </tbody>
99 </table>
100 </div>
101 </div>
102 );
103}
105export default Datasets;