Archived
78 lines
2.0 KiB
JavaScript
78 lines
2.0 KiB
JavaScript
import React, { Component } from 'react';
|
|
import {
|
|
Navbar,
|
|
Nav,
|
|
NavDropdown,
|
|
//Form,
|
|
FormControl,
|
|
Button
|
|
} from 'react-bootstrap'; //eslint-disable-next-line
|
|
import { Link, withRouter } from 'react-router-dom';
|
|
import './css/TopBar.css';
|
|
// import PropTypes from "prop-types";
|
|
|
|
class TopBar extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
query: ''
|
|
};
|
|
this.handleChange = this.handleChange.bind(this);
|
|
this.handleSubmit = this.handleSubmit.bind(this);
|
|
}
|
|
|
|
handleChange(event) {
|
|
this.setState({
|
|
query: event.target.value
|
|
});
|
|
}
|
|
handleSubmit(event) {
|
|
//alert(this.state.query);
|
|
event.preventDefault();
|
|
event.target.reset();
|
|
this.props.history.push('/search/'+this.state.query);
|
|
}
|
|
render() {
|
|
return (
|
|
<React.Fragment>
|
|
<Navbar bg="dark" className="py-0 px-1 w-100" expand="md">
|
|
<Navbar.Brand>
|
|
<Link to="/">HazeTV</Link>
|
|
</Navbar.Brand>
|
|
<Navbar.Toggle aria-controls="basic-navbar-nav" />
|
|
<Navbar.Collapse id="basic-navbar-nav">
|
|
<Nav className="mr-auto">
|
|
<Link to="/" className="text-light nav-link">Home</Link>
|
|
<Link to="/link" className="text-light nav-link">link</Link>
|
|
{/* <NavDropdown title="arnaldo" id="basic-nav-dropdown" >
|
|
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
|
|
<NavDropdown.Item href="#action/3.2">
|
|
Another action
|
|
</NavDropdown.Item>
|
|
<NavDropdown.Item href="#action/3.3">
|
|
Something
|
|
</NavDropdown.Item>
|
|
<NavDropdown.Divider />
|
|
<NavDropdown.Item href="#action/3.4">
|
|
Separated link
|
|
</NavDropdown.Item>
|
|
</NavDropdown> */}
|
|
</Nav>
|
|
<form className="form-inline" onSubmit={this.handleSubmit}>
|
|
<FormControl
|
|
type="text"
|
|
placeholder="Search"
|
|
className="mr-sm-2"
|
|
onChange={this.handleChange}
|
|
/>
|
|
<Button type="submit" variant="outline-success">Search</Button>
|
|
</form>
|
|
</Navbar.Collapse>
|
|
</Navbar>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withRouter(TopBar);
|