| // src/components/data-hub/DataHubLayout.tsx | |
| import { useState } from "react"; | |
| import { RepositoryBrowser } from "./RepositoryBrowser"; | |
| import { ProtocolsWorkspace } from "./ProtocolsWorkspace"; | |
| import { ELNNotebook } from "./ELNNotebook"; | |
| import { DataVizSandbox } from "./DataVizSandbox"; | |
| import { CodeRepoPanel } from "./CodeRepoPanel"; | |
| import { PreregistrationForm } from "./PreregistrationForm"; | |
| import { | |
| Database, ClipboardList, BookOpen, BarChart3, GitBranch, FileCheck, | |
| } from "lucide-react"; | |
| const TABS = [ | |
| { key: "repository", icon: Database, label: "Repository" }, | |
| { key: "protocols", icon: ClipboardList, label: "Protocols" }, | |
| { key: "eln", icon: BookOpen, label: "Lab Notebook" }, | |
| { key: "viz", icon: BarChart3, label: "Visualization" }, | |
| { key: "code", icon: GitBranch, label: "Code Repos" }, | |
| { key: "prereg", icon: FileCheck, label: "Preregistration" }, | |
| ]; | |
| export function DataHubLayout() { | |
| const [activeTab, setActiveTab] = useState("repository"); | |
| return ( | |
| <div className="max-w-7xl mx-auto px-4 py-8 space-y-6"> | |
| <h1 className="text-2xl font-bold gradient-text">Data & Repository Hub</h1> | |
| <div className="flex gap-1 border-b border-white/20 dark:border-white/10 overflow-x-auto"> | |
| {TABS.map(tab => ( | |
| <button key={tab.key} onClick={() => setActiveTab(tab.key)} | |
| className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium rounded-t-xl transition ${ | |
| activeTab === tab.key ? "bg-white/30 dark:bg-white/10 text-primary border-b-2 border-primary" : "text-gray-500 hover:text-gray-700" | |
| }`}> | |
| <tab.icon className="w-4 h-4"/> {tab.label} | |
| </button> | |
| ))} | |
| </div> | |
| <div className="glass rounded-2xl border border-white/20 dark:border-white/10 p-6"> | |
| {activeTab === "repository" && <RepositoryBrowser />} | |
| {activeTab === "protocols" && <ProtocolsWorkspace />} | |
| {activeTab === "eln" && <ELNNotebook />} | |
| {activeTab === "viz" && <DataVizSandbox />} | |
| {activeTab === "code" && <CodeRepoPanel />} | |
| {activeTab === "prereg" && <PreregistrationForm />} | |
| </div> | |
| </div> | |
| ); | |
| } |
Xet Storage Details
- Size:
- 2.16 kB
- Xet hash:
- c6be385b9f158d8d9870890da6fd9f97178590823a36e0908c9936ea78ebb52c
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.