tghandbook/lib/App.tsx

27 lines
732 B
TypeScript
Raw Normal View History

2020-06-16 09:32:48 +00:00
import * as React from "react";
import WikiPage from "./components/WikiPage";
2020-06-16 15:08:44 +00:00
import TabList, { TabListItem } from "./components/TabList";
import { useState } from "react";
2020-06-16 09:32:48 +00:00
export default function App() {
2020-06-16 15:08:44 +00:00
const [tabs, setTabs] = useState<TabListItem[]>([
2020-06-16 16:00:29 +00:00
{ page: "Guide_to_chemistry" },
2020-06-16 19:13:18 +00:00
{ page: "Guide_to_medicine" },
2020-06-16 15:08:44 +00:00
]);
const [activeTab, setActiveTab] = useState(0);
2020-06-16 09:32:48 +00:00
return (
<React.Fragment>
2020-06-16 16:00:29 +00:00
<TabList
tabs={tabs}
active={activeTab}
tabClicked={(_tab, i) => setActiveTab(i)}
/>
2020-06-16 09:32:48 +00:00
<section id="tabs">
2020-06-16 15:08:44 +00:00
{tabs.map((tab, i) => (
2020-06-16 16:00:29 +00:00
<WikiPage key={tab.page} page={tab.page} visible={activeTab == i} />
2020-06-16 15:08:44 +00:00
))}
2020-06-16 09:32:48 +00:00
</section>
</React.Fragment>
);
}