components: add WIP tabs
commit5c04c34ad61a63b668cf87b43023d900dd240ff4
authorMatilde Park <matilde.park@urbit.org>
dateWed 1 Jun 2022, 15:54 (4 years ago)
parentd5b9ca0
components/Tab.jsnew file+14
@@ -0,0 +1,14 @@
1+import React from "react";
2+import { TabContext } from "./Tabs";
3+
4+const Tab = ({ label, children }) => {
5+ const currentTab = React.useContext(TabContext);
6+
7+ if (label !== currentTab) {
8+ return null;
9+ }
10+
11+ return children;
12+};
13+
14+export default Tab;
components/Tabs.jsnew file+28
@@ -0,0 +1,28 @@
1+import React from "react";
2+
3+export const TabContext = React.createContext();
4+
5+const Tabs = ({ labels, children }) => {
6+ const [currentTab, setCurrentTab] = React.useState(labels[0]);
7+
8+ return (
9+ <TabContext.Provider value={currentTab}>
10+ <ul role="tablist">
11+ {labels.map((label) => (
12+ <li key={label}>
13+ <button
14+ role="tab"
15+ aria-selected={label === currentTab}
16+ onClick={() => setCurrentTab(label)}
17+ >
18+ {label}
19+ </button>
20+ </li>
21+ ))}
22+ </ul>
23+ {children}
24+ </TabContext.Provider>
25+ );
26+};
27+
28+export default Tabs;