106 lines
2 KiB
JavaScript
106 lines
2 KiB
JavaScript
import React from "react";
|
|
import { GridLayoutMenu } from "./room/GridLayoutMenu";
|
|
import {
|
|
Header,
|
|
HeaderLogo,
|
|
LeftNav,
|
|
RightNav,
|
|
RoomHeaderInfo,
|
|
} from "./Header";
|
|
import { UserMenu } from "./UserMenu";
|
|
|
|
export default {
|
|
title: "Header",
|
|
component: Header,
|
|
parameters: {
|
|
layout: "fullscreen",
|
|
},
|
|
};
|
|
|
|
export const HomeAnonymous = () => (
|
|
<Header>
|
|
<LeftNav>
|
|
<HeaderLogo />
|
|
</LeftNav>
|
|
<RightNav>
|
|
<UserMenu />
|
|
</RightNav>
|
|
</Header>
|
|
);
|
|
|
|
export const HomeNamedGuest = () => (
|
|
<Header>
|
|
<LeftNav>
|
|
<HeaderLogo />
|
|
</LeftNav>
|
|
<RightNav>
|
|
<UserMenu isAuthenticated isPasswordlessUser displayName="Yara" />
|
|
</RightNav>
|
|
</Header>
|
|
);
|
|
|
|
export const HomeLoggedIn = () => (
|
|
<Header>
|
|
<LeftNav>
|
|
<HeaderLogo />
|
|
</LeftNav>
|
|
<RightNav>
|
|
<UserMenu isAuthenticated displayName="Yara" />
|
|
</RightNav>
|
|
</Header>
|
|
);
|
|
|
|
export const LobbyNamedGuest = () => (
|
|
<Header>
|
|
<LeftNav>
|
|
<RoomHeaderInfo roomName="Q4Roadmap" />
|
|
</LeftNav>
|
|
<RightNav>
|
|
<UserMenu isAuthenticated isPasswordlessUser displayName="Yara" />
|
|
</RightNav>
|
|
</Header>
|
|
);
|
|
|
|
export const LobbyLoggedIn = () => (
|
|
<Header>
|
|
<LeftNav>
|
|
<RoomHeaderInfo roomName="Q4Roadmap" />
|
|
</LeftNav>
|
|
<RightNav>
|
|
<UserMenu isAuthenticated displayName="Yara" />
|
|
</RightNav>
|
|
</Header>
|
|
);
|
|
|
|
export const InRoomNamedGuest = () => (
|
|
<Header>
|
|
<LeftNav>
|
|
<RoomHeaderInfo roomName="Q4Roadmap" />
|
|
</LeftNav>
|
|
<RightNav>
|
|
<GridLayoutMenu layout="freedom" />
|
|
<UserMenu isAuthenticated isPasswordlessUser displayName="Yara" />
|
|
</RightNav>
|
|
</Header>
|
|
);
|
|
|
|
export const InRoomLoggedIn = () => (
|
|
<Header>
|
|
<LeftNav>
|
|
<RoomHeaderInfo roomName="Q4Roadmap" />
|
|
</LeftNav>
|
|
<RightNav>
|
|
<GridLayoutMenu layout="freedom" />
|
|
<UserMenu isAuthenticated displayName="Yara" />
|
|
</RightNav>
|
|
</Header>
|
|
);
|
|
|
|
export const CreateAccount = () => (
|
|
<Header>
|
|
<LeftNav>
|
|
<HeaderLogo />
|
|
</LeftNav>
|
|
<RightNav></RightNav>
|
|
</Header>
|
|
);
|