Added a Search Box

Author: JasonStoltz

src/App.css

@@ -0,0 +1,10 @@
+.App {
+ text-align: center;
+}
+
+.App-body {
+ display: flex;
+ max-width: 1200px;
+ padding: 1rem 2rem 4rem 2rem;
+ margin: auto;
+}

src/App.js

@@ -1,16 +1,16 @@
 import React, { Component } from "react";
+
 import "./App.css";
 
+import Header from "./components/Header";
+
 class App extends Component {
  render() {
  return (
  <div className="App">
- <header className="App-header">
- <h1 className="App-title">Welcome to React</h1>
- </header>
- <p className="App-intro">
- To get started, edit <code>src/App.js</code> and save to reload.
- </p>
+ <div className="App-body">
+ <Header />
+ </div>
  </div>
  );
  }

src/components/Header.css

@@ -0,0 +1,11 @@
+.Header {
+ display: flex;
+ width: 100%;
+ align-items: center;
+ height: 50px;
+}
+
+.Header-label {
+ font-size: 20px;
+ margin-right: 10px;
+}

src/components/Header.js

@@ -0,0 +1,15 @@
+import React from "react";
+import "./Header.css";
+
+import SearchBox from "../containers/SearchBox";
+
+export default function Header() {
+ return (
+ <div className="Header">
+ <label className="Header-label" htmlFor="search">
+ Search
+ </label>
+ <SearchBox />
+ </div>
+ );
+}

src/components/SearchBox.css

@@ -0,0 +1,44 @@
+.SearchBox {
+ display: flex;
+}
+
+.SearchBox-input {
+ /* reset */
+ background-image: none;
+ background-color: transparent;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+ border: none;
+
+ font-size: 16px;
+ min-width: 400px;
+ height: 30px;
+ padding: 0 6px;
+ border: 1px solid darkgray;
+ border-bottom-left-radius: 2px;
+ border-top-left-radius: 2px;
+}
+
+.SearchBox-button {
+ /* reset */
+ border: none;
+ margin: 0;
+ padding: 0;
+ width: auto;
+ overflow: visible;
+ background: transparent;
+ color: inherit;
+ font: inherit;
+ line-height: normal;
+ -webkit-font-smoothing: inherit;
+ -moz-osx-font-smoothing: inherit;
+ -webkit-appearance: none;
+
+ border-bottom-right-radius: 2px;
+ border-top-right-radius: 2px;
+ border: 1px solid darkgray;
+ border-left: none;
+ padding: 0 5px;
+ cursor: pointer;
+}

src/components/SearchBox.js

@@ -0,0 +1,16 @@
+import React from "react";
+import "./SearchBox.css";
+
+export default function SearchBox({ value, onChange }) {
+ return (
+ <form className="SearchBox">
+ <input
+ className="SearchBox-input"
+ type="text"
+ value={value}
+ onChange={onChange}
+ />
+ <button className="SearchBox-button">GO</button>
+ </form>
+ );
+}

src/containers/SearchBox.js

@@ -0,0 +1,21 @@
+import React, { Component } from "react";
+
+import SearchBox from "../components/SearchBox";
+
+class App extends Component {
+ state = {
+ value: "cat"
+ };
+
+ render() {
+ return <SearchBox value={this.state.value} onChange={this.handleChange} />;
+ }
+
+ handleChange = e => {
+ this.setState({
+ value: e.currentTarget.value
+ });
+ };
+}
+
+export default App;