41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import './nav.css';
|
|
|
|
export default class Nav extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
query: "",
|
|
};
|
|
}
|
|
render() {
|
|
return (
|
|
<nav>
|
|
<input className="search" type="search" placeholder="Search for commands"
|
|
value={this.props.query} onChange={this.props.onQueryChange} results="0" />
|
|
<ul>
|
|
{Object.keys(this.props.commands).map((name) => {
|
|
let cmd = this.props.commands[name];
|
|
if (cmd.name.indexOf(this.props.query) === -1) {
|
|
return null;
|
|
}
|
|
|
|
var className = "";
|
|
if (this.props.active && cmd.name === this.props.active) {
|
|
className = "active";
|
|
}
|
|
|
|
return (
|
|
<li key={cmd.name}>
|
|
<Link to={"/cmd/" + cmd.name} className={className}>{cmd.name}</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</nav>
|
|
);
|
|
}
|
|
}
|