-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Tabs.stories.tsx
50 lines (46 loc) · 1.27 KB
/
Tabs.stories.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import React, { useState } from "react";
import { ComponentMeta } from "@storybook/react";
import { Tabs, Tab, M } from "../src/lib";
export default {
title: "Jambonz UI/Tabs",
component: Tabs,
subcomponents: { Tab },
} as ComponentMeta<typeof Tabs>;
export const TabsMenu = () => {
const [activeTab, setActiveTab] = useState("");
return (
<>
<div style={{ padding: "16px", textAlign: "center" }}>
<M>
The active tab is <span>{activeTab}</span>
</M>
</div>
<Tabs active={[activeTab, setActiveTab]}>
<Tab id="tab1" label="Tab One">
<M>This is tab one.</M>
</Tab>
<Tab id="tab2" label="Tab Two">
<M>This is tab two.</M>
</Tab>
<Tab id="tab3" label="Tab Three">
<M>This is tab three.</M>
</Tab>
</Tabs>
<div style={{ padding: "16px", textAlign: "center" }}>
<label htmlFor="number" className="m" style={{ marginRight: "8px" }}>
Set active tab externally
</label>
<input
name="number"
type="number"
min="1"
max="3"
onChange={(e) => {
setActiveTab(`tab${e.target.value}`);
}}
defaultValue="1"
/>
</div>
</>
);
};