d9fc1b2Demonstrate lazy reading of remote HDF5/NWB files (direct h5wasm + LINDI)magland 1import { useState } from "react";
2import { MarkdownPage } from "./components/MarkdownPage";
3import { Demo } from "./components/Demo";
5type Tab = "about" | "demo";
7export const App = () => {
8 const [tab, setTab] = useState<Tab>("about");
10 return (
11 <div
12 style={{
13 maxWidth: 980,
14 margin: "0 auto",
15 padding: "0 20px 60px",
16 fontFamily:
17 "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
18 color: "#1f2328",
19 }}
20 >
21 <nav
22 style={{
23 position: "sticky",
24 top: 0,
25 background: "#fff",
26 borderBottom: "1px solid #e2e2e2",
27 padding: "12px 0",
28 display: "flex",
29 gap: 8,
30 zIndex: 10,
31 }}
32 >
33 <TabButton active={tab === "about"} onClick={() => setTab("about")}>
34 About
35 </TabButton>
36 <TabButton active={tab === "demo"} onClick={() => setTab("demo")}>
37 Live demo
38 </TabButton>
40 href="https://github.com/concept-collection/remote-hdf5-lazy-read"
41 target="_blank"
42 rel="noopener noreferrer"
43 style={{
44 marginLeft: "auto",
45 alignSelf: "center",
46 color: "#1f6feb",
47 fontSize: 14,
48 fontWeight: 600,
49 textDecoration: "none",
50 }}
51 >
52 Source ↗
53 </a>
55 <div style={{ paddingTop: 20 }}>
56 {tab === "about" ? <MarkdownPage /> : <Demo />}
57 </div>
58 </div>
59 );
60};
62const TabButton = ({
63 active,
64 onClick,
65 children,
66}: {
67 active: boolean;
68 onClick: () => void;
69 children: React.ReactNode;
70}) => (
71 <button
72 onClick={onClick}
73 style={{
74 border: "none",
75 background: active ? "#1f6feb" : "transparent",
76 color: active ? "#fff" : "#1f6feb",
77 padding: "6px 14px",
78 borderRadius: 6,
79 cursor: "pointer",
80 fontSize: 14,
81 fontWeight: 600,
82 }}
83 >
84 {children}
85 </button>
86);