diff --git a/src/core/client/stream/components/Auth.tsx b/src/core/client/stream/components/Auth.tsx new file mode 100644 index 000000000..04284be43 --- /dev/null +++ b/src/core/client/stream/components/Auth.tsx @@ -0,0 +1,45 @@ +import * as React from "react"; +import { StatelessComponent } from "react"; + +import { Flex, Button, Popup, Typography } from "talk-ui/components"; + +interface AuthProps { + open: boolean; + focus: boolean; + openPopup: () => void; + closePopup: () => void; + setFocus: (focus: boolean) => void; +} + +const Auth: StatelessComponent = props => { + return ( +
+ props.setFocus(true)} + onBlur={() => props.setFocus(false)} + onClose={props.closePopup} + /> + + Join the conversation | + + + +
+ ); +}; + +export default Auth; diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/components/Stream.tsx index ef1ed5bda..b543ba125 100644 --- a/src/core/client/stream/components/Stream.tsx +++ b/src/core/client/stream/components/Stream.tsx @@ -7,6 +7,7 @@ import { Button, Flex } from "talk-ui/components"; import CommentContainer from "../containers/CommentContainer"; import PostCommentFormContainer from "../containers/PostCommentFormContainer"; import ReplyListContainer from "../containers/ReplyListContainer"; +import AuthContainer from "../containers/AuthContainer"; import * as styles from "./Stream.css"; export interface StreamProps { @@ -21,6 +22,7 @@ export interface StreamProps { const Stream: StatelessComponent = props => { return (
+ { + this.setState({ + open: true, + }); + }; + + closePopup = () => { + this.setState({ + open: false, + }); + }; + + setFocus = (focus: boolean) => { + this.setState({ + focus, + }); + }; + + render() { + const { open, focus } = this.state; + return ( + + ); + } +} + +export default AuthContainer;