2024-05-13 23:40:18 +02:00
|
|
|
// Copyright 2024, Command Line Inc.
|
|
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
|
2024-05-10 05:24:24 +02:00
|
|
|
import * as React from "react";
|
|
|
|
import * as jotai from "jotai";
|
2024-05-14 06:42:25 +02:00
|
|
|
import { Provider } from "jotai";
|
2024-05-10 05:24:24 +02:00
|
|
|
import * as rx from "rxjs";
|
2024-05-13 22:59:44 +02:00
|
|
|
import { clsx } from "clsx";
|
2024-05-14 06:42:25 +02:00
|
|
|
import { TabContent } from "@/app/tab/tab";
|
2024-05-14 00:40:52 +02:00
|
|
|
import { v4 as uuidv4 } from "uuid";
|
2024-05-10 05:24:24 +02:00
|
|
|
|
2024-05-12 18:52:12 +02:00
|
|
|
import "/public/style.less";
|
|
|
|
|
2024-05-14 06:42:25 +02:00
|
|
|
const jotaiStore = jotai.createStore();
|
2024-05-10 05:24:24 +02:00
|
|
|
|
2024-05-14 00:40:52 +02:00
|
|
|
const tabArr = [
|
|
|
|
{ name: "Tab 1", tabid: uuidv4() },
|
|
|
|
{ name: "Tab 2", tabid: uuidv4() },
|
|
|
|
{ name: "Tab 3", tabid: uuidv4() },
|
|
|
|
];
|
2024-05-10 05:24:24 +02:00
|
|
|
|
2024-05-14 00:40:52 +02:00
|
|
|
const activeTabIdAtom = jotai.atom(tabArr[0].tabid);
|
2024-05-10 05:24:24 +02:00
|
|
|
|
|
|
|
const App = () => {
|
|
|
|
return (
|
|
|
|
<Provider store={jotaiStore}>
|
|
|
|
<AppInner />
|
|
|
|
</Provider>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2024-05-14 00:10:31 +02:00
|
|
|
const TabBar = () => {
|
2024-05-14 00:40:52 +02:00
|
|
|
const [activeTab, setActiveTab] = jotai.useAtom(activeTabIdAtom);
|
2024-05-13 22:59:44 +02:00
|
|
|
return (
|
2024-05-14 00:10:31 +02:00
|
|
|
<div className="tab-bar">
|
2024-05-14 00:40:52 +02:00
|
|
|
{tabArr.map((tab, idx) => {
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
key={idx}
|
|
|
|
className={clsx("tab", { active: activeTab === tab.tabid })}
|
|
|
|
onClick={() => setActiveTab(tab.tabid)}
|
|
|
|
>
|
|
|
|
{tab.name}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
})}
|
2024-05-13 22:59:44 +02:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const Workspace = () => {
|
2024-05-14 00:40:52 +02:00
|
|
|
const activeTabId = jotai.useAtomValue(activeTabIdAtom);
|
2024-05-13 22:59:44 +02:00
|
|
|
return (
|
|
|
|
<div className="workspace">
|
2024-05-14 00:10:31 +02:00
|
|
|
<TabBar />
|
2024-05-14 00:40:52 +02:00
|
|
|
<TabContent tabId={activeTabId} />
|
2024-05-13 22:59:44 +02:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2024-05-10 05:24:24 +02:00
|
|
|
const AppInner = () => {
|
|
|
|
return (
|
2024-05-13 22:59:44 +02:00
|
|
|
<div className="mainapp">
|
|
|
|
<div className="titlebar"></div>
|
|
|
|
<Workspace />
|
2024-05-10 05:24:24 +02:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export { App };
|