1 | import { storiesOf } from "@storybook/react";
|
2 | import * as React from "react";
|
3 | import { Menu } from "../components/Menu";
|
4 | import { Header } from "../components/Header";
|
5 | storiesOf("Menu", module).add("Examples", () => (
|
6 | <div>
|
7 | <Menu id="menubar" mode="horizontal" className={scroll}>
|
8 | <Menu.Item type="logo">
|
9 | <img src="/logo.svg" alt="logo" />
|
10 | </Menu.Item>
|
11 | <div className="emptybar menu-item-no" />
|
12 | <Menu.Item>
|
13 | <span>Home</span>
|
14 | </Menu.Item>
|
15 | <Menu.Item>
|
16 | <span>About</span>
|
17 | </Menu.Item>
|
18 |
|
19 | <Menu.Item>
|
20 | <span>Resources</span>
|
21 | </Menu.Item>
|
22 | <Menu.Item>
|
23 | <span>Workspace</span>
|
24 | </Menu.Item>
|
25 | <Menu.Item type="profile">
|
26 | <img src="defaultProfile.png" alt="avatar" />
|
27 | </Menu.Item>
|
28 | </Menu>
|
29 | <div style={{marginTop:'75px'}}>
|
30 | <Header teamTitle="Team Turtles!" teamPictures={["defaultProfile.png", "defaultProfile.png"]} handleTeamClick={undefined}/>
|
31 | <p>Example use of menubar and header for workspace etc.</p>
|
32 | <Header title="Welcome!" back="Go back to workspace" handleBackClick={undefined}/>
|
33 | <p>Example use of menubar and header for workspace etc. with back button</p>
|
34 | <p>Adding type="white" to the menu changes it to white variant</p>
|
35 | <div style={{height:'1000px'}}></div>
|
36 | </div>
|
37 | </div>
|
38 | ));
|