diff --git a/src/react-components/footer.js b/src/react-components/footer.js new file mode 100644 index 0000000000000000000000000000000000000000..45f855feb543f29902a66aee431a7216c895308d --- /dev/null +++ b/src/react-components/footer.js @@ -0,0 +1,26 @@ +import React from "react"; +import PropTypes from "prop-types"; +import FontAwesomeIcon from "@fortawesome/react-fontawesome"; +import faAngleLeft from "@fortawesome/fontawesome-free-solid/faAngleLeft"; + +import styles from "../assets/stylesheets/footer.css"; + +const Footer = ({ hubName, participantCount }) => ( + <div className={styles.container}> + <span className={styles.hubName}>{hubName}</span> + <button className="{style.shareButton}" onClick={this.emitChangeToPrevious}> + <FontAwesomeIcon icon={faAngleLeft} /> + </button> + <div> + <FontAwesomeIcon icon={faAngleLeft} /> + <span>{participantCount}</span> + </div> + </div> +); + +Footer.propTypes = { + hubName: PropTypes.string, + participantCount: PropTypes.number +}; + +export default Footer; diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js index 3e22208dacc6219b59cc9276562c71d43f129f03..7103b25831e24aa972d2315152103cfe4b485e60 100644 --- a/src/react-components/ui-root.js +++ b/src/react-components/ui-root.js @@ -13,6 +13,7 @@ import { TwoDEntryButton, GenericEntryButton, GearVREntryButton, DaydreamEntryBu import { ProfileInfoHeader } from "./profile-info-header.js"; import ProfileEntryPanel from "./profile-entry-panel"; import TwoDHUD from "./2d-hud"; +import Footer from "./footer"; const mobiledetect = new MobileDetect(navigator.userAgent); @@ -758,7 +759,10 @@ class UIRoot extends Component { )} </div> {this.state.entryStep === ENTRY_STEPS.finished ? ( - <TwoDHUD muted={this.state.muted} onToggleMute={this.toggleMute} /> + <div> + <TwoDHUD muted={this.state.muted} onToggleMute={this.toggleMute} /> + <Footer /> + </div> ) : null} </div> </IntlProvider>