Home.tsx 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. import React, { Component } from 'react';
  2. import { RouteComponentProps, withRouter } from 'react-router-dom';
  3. import styled from 'styled-components';
  4. import CreateRoomInput from '../components/CreateRoomInput';
  5. import { TalkyButton } from '../styles/button';
  6. import './Home.css';
  7. const StartChatButton = styled(TalkyButton)({
  8. marginLeft: '5px',
  9. padding: '10px',
  10. display: 'inline-block',
  11. backgroundColor: '#00b0e9',
  12. color: 'white',
  13. ':hover': {
  14. backgroundColor: '#009ed2',
  15. color: 'white'
  16. }
  17. });
  18. interface State {
  19. roomName: string;
  20. }
  21. class Home extends Component<RouteComponentProps, State> {
  22. constructor(props: RouteComponentProps) {
  23. super(props);
  24. this.state = { roomName: '' };
  25. }
  26. public render() {
  27. return (
  28. <>
  29. <div className="container">
  30. <p>
  31. Truly simple video chat
  32. <br />
  33. and screen sharing for groups
  34. </p>
  35. <form className="create-room-form">
  36. <span className="create-room-form-input-wrapper">
  37. <span className="domain">yourdomain/</span>
  38. <CreateRoomInput
  39. roomName={this.state.roomName}
  40. onChange={this.onRoomNameChange}
  41. />
  42. </span>
  43. <StartChatButton onClick={this.joinRoom}>
  44. Start a chat
  45. </StartChatButton>
  46. </form>
  47. <footer>
  48. <a
  49. className="footer-logo"
  50. href="https://andyet.com"
  51. title="Made with love by &amp;yet"
  52. target="_blank"
  53. rel="noopener noreferrer"
  54. />
  55. </footer>
  56. </div>
  57. </>
  58. );
  59. }
  60. private joinRoom = () => {
  61. this.props.history.push(`/${this.state.roomName}`);
  62. };
  63. private onRoomNameChange = (roomName: string) => {
  64. this.setState({ roomName });
  65. };
  66. }
  67. export default withRouter(Home);