Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from 'react';
- import {
- Container,
- Row,
- Navbar,
- FormControl,
- Col,
- Form,
- Button,
- Jumbotron,
- DropdownButton,
- Dropdown,
- Modal,
- } from 'react-bootstrap';
- import logo from '../pic/Icon.png';
- export default class Header extends Component {
- state = {
- modal: false,
- };
- signupClose = () => {
- this.setState({ modal: false });
- };
- signupOpen = () => {
- this.setState({ modal: true });
- };
- render() {
- return (
- <div>
- <div>
- <Jumbotron>
- <Container>
- <Row>
- <Col>
- <span>
- <img src={logo} alt='logo' />
- </span>
- </Col>
- <Col>
- <Form inline className='search'>
- <FormControl
- type='text'
- placeholder='Tangerang Selatan'
- className='mr-sm-2'
- />
- <Button variant='outline-success'>Search</Button>
- </Form>
- </Col>
- <Col>
- <div className='sign'>
- <Button
- onClick={this.signupOpen}
- variant='light'
- style={{ marginRight: '20px' }}
- >
- Sign In
- </Button>
- <Singin
- visible={this.state.modal}
- onClose={this.signupClose}
- />{' '}
- <Button variant='dark'>Sign Up</Button>{' '}
- </div>
- </Col>
- </Row>
- </Container>
- </Jumbotron>
- </div>
- </div>
- );
- }
- }
- class Singin extends Component {
- constructor(props) {
- super(props);
- }
- render() {
- return (
- <div>
- {/* <Button color='primary' onClick={this.handleOpenModal}>
- Launch
- </Button> */}
- <Modal
- // show={this.props}
- onHide={this.props.onClose}
- size='lg'
- aria-labelledby='contained-modal-title-vcenter'
- centered
- >
- <Modal.Header closeButton></Modal.Header>
- <Modal.Body>
- <Form>
- <h1 style={{ textAlign: 'center' }}>SIGN IN</h1>
- <Form.Group controlId='formBasicName'>
- <Form.Label>Fullname</Form.Label>
- <Form.Control type='email' placeholder='Enter Fullname' />
- </Form.Group>
- <Form.Group controlId='formBasicUname'>
- <Form.Label>Username</Form.Label>
- <Form.Control type='text' placeholder='Enter Username' />
- </Form.Group>
- <Form.Group controlId='formBasicEmail'>
- <Form.Label>Email</Form.Label>
- <Form.Control type='email' placeholder='Enter Email' />
- </Form.Group>
- <Form.Group controlId='formBasicPassword'>
- <Form.Label>Password</Form.Label>
- <Form.Control type='password' placeholder='Enter Password' />
- </Form.Group>
- <Form.Group>
- <Form.Label>List as</Form.Label>
- <DropdownButton
- id='dropdown-basic-button'
- title='Select your status'
- >
- <Dropdown.Item href='#/action-1'>User</Dropdown.Item>
- <Dropdown.Item href='#/action-2'>Owner</Dropdown.Item>
- </DropdownButton>
- </Form.Group>{' '}
- <Form.Group>
- <Form.Label>Gender</Form.Label>
- <DropdownButton
- id='dropdown-basic-button'
- title='Select your gender'
- >
- <Dropdown.Item href='#/action-1'>Male</Dropdown.Item>
- <Dropdown.Item href='#/action-2'>Female</Dropdown.Item>
- </DropdownButton>
- </Form.Group>
- <Form.Group controlId='exampleForm.ControlTextarea1'>
- <Form.Label>Address</Form.Label>
- <Form.Control as='textarea' rows='3' />
- </Form.Group>
- <div style={{ display: 'flex', justifyContent: 'center' }}>
- <Button
- variant='primary'
- style={{ display: 'flex', justifyContent: 'center' }}
- onClick={this.handleCloseModal}
- >
- SIGN IN
- </Button>
- </div>
- </Form>
- </Modal.Body>
- </Modal>
- </div>
- );
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement