home

import React, { Component } from 'react';
import logo from './pic/Icon.png';
import {
  Container,
  Row,
  Col,
  Navbar,
  Form,
  FormControl,
  Button,
} from 'react-bootstrap';
import '../node_modules/react-datepicker/dist/react-datepicker';
import { DatePicker } from 'react-datepicker';

export default class Home extends Component {
  state = {
    startDate: new Date(),
  };

  handleChange = (date) => {
    this.setState({
      startDate: date,
    });
  };
  render() {
    return (
      <div>
        <div className='header'>
          <Container>
            <Row>
              <Col sm={6}>
                <Navbar.Brand href='#home'>
                  <span>
                    <img src={logo} alt='logo' />
                  </span>
                </Navbar.Brand>
              </Col>
              <Col sm={4}>
                <Form inline>
                  <FormControl
                    type='text'
                    placeholder='Tangerang Selatan'
                    className='mr-sm-2'
                  />
                  <Button variant='outline-success'>Search</Button>
                </Form>
              </Col>
              <Col sm={2}>
                <Button variant='light'>Sign In</Button>{' '}
                <Button variant='dark'>Sign Up</Button>{' '}
              </Col>
            </Row>
          </Container>
        </div>
        <div className='filter'>
          <h2>Type of Rent</h2>
          <Button variant='outline-secondary'>Date</Button>{' '}
          <Button variant='outline-secondary'>Month</Button>{' '}
          <Button variant='outline-secondary'>Year</Button> <h2>Date</h2>
          <DatePicker
            selected={this.state.startDate}
            onChange={this.handleChange}
          />
        </div>
      </div>
    );
  }
}