2import { Dataset as DatasetType } from '../types';
4interface DatasetProps {
5 datasets: DatasetType[];
6}
8function Dataset({ datasets }: DatasetProps) {
9 const { datasetName } = useParams<{ datasetName: string }>();
10 const dataset = datasets.find(d => d.name === datasetName);
12 if (!dataset) {
13 return <div>Dataset not found</div>;
14 }
16 return (
17 <div>
18 <h1
19 style={{
20 fontSize: "2rem",
21 fontWeight: "bold",
22 color: "#333",
23 marginBottom: "1rem",
24 }}
25 >
26 {dataset.name}
27 </h1>
28 <div style={{ maxWidth: "800px", margin: "0 auto" }}>
29 <div style={{ marginBottom: "1.5rem" }}>
30 <h2 style={{ fontSize: "1.2rem", fontWeight: "bold", marginBottom: "0.5rem" }}>Description</h2>
31 <p style={{ fontSize: "0.9rem", lineHeight: "1.5" }}>{dataset.description}</p>
32 </div>
33 <div style={{ marginBottom: "1.5rem" }}>
34 <h2 style={{ fontSize: "1.2rem", fontWeight: "bold", marginBottom: "0.5rem" }}>Version</h2>
35 <p style={{ fontSize: "0.9rem" }}>{dataset.version}</p>
36 </div>
37 <div style={{ marginBottom: "1.5rem" }}>
38 <h2 style={{ fontSize: "1.2rem", fontWeight: "bold", marginBottom: "0.5rem" }}>Tags</h2>
39 <div>
40 {dataset.tags.map((tag) => (
41 <span
42 key={tag}
43 style={{
44 display: "inline-block",
45 backgroundColor: "#e1e1e1",
46 padding: "2px 6px",
47 borderRadius: "3px",
48 margin: "2px",
49 fontSize: "0.8rem",
50 }}
51 >
52 {tag}
53 </span>
54 ))}
55 </div>
56 </div>
57 <div style={{ marginBottom: "1.5rem" }}>
58 <h2 style={{ fontSize: "1.2rem", fontWeight: "bold", marginBottom: "0.5rem" }}>Downloads</h2>
59 <div style={{ display: "flex", gap: "1rem" }}>
60 {dataset.data_url_npy && (
61 <a
62 href={dataset.data_url_npy}
63 download={`${dataset.name}-${dataset.version}.npy`}
64 style={{
65 color: "#0066cc",
66 textDecoration: "none",
67 padding: "4px 8px",
68 backgroundColor: "#f0f0f0",
69 borderRadius: "4px",
70 fontSize: "0.9rem",
71 }}
72 >
73 Download NPY
74 </a>
75 )}
76 {dataset.data_url_raw && (
77 <a
78 href={dataset.data_url_raw}
79 download={`${dataset.name}-${dataset.version}.dat`}
80 style={{
81 color: "#0066cc",
82 textDecoration: "none",
83 padding: "4px 8px",
84 backgroundColor: "#f0f0f0",
85 borderRadius: "4px",
86 fontSize: "0.9rem",
87 }}
88 >
89 Download RAW
90 </a>
91 )}
92 </div>
93 </div>
94 {dataset.source_file && (
95 <div style={{ marginBottom: "1.5rem" }}>
96 <h2 style={{ fontSize: "1.2rem", fontWeight: "bold", marginBottom: "0.5rem" }}>Source</h2>
97 <a
98 href={dataset.source_file}
99 target="_blank"
100 rel="noopener noreferrer"
101 style={{
102 color: "#0066cc",
103 textDecoration: "none",
104 padding: "4px 8px",
105 backgroundColor: "#f0f0f0",
106 borderRadius: "4px",
107 fontSize: "0.9rem",
108 }}
109 >
110 View Source
111 </a>
112 </div>
113 )}
114 </div>
115 </div>
116 );
117}
119export default Dataset;