Add some basic styling

1 files changed, 26 insertions, 9 deletions

diff --git a/src/client/react/components/presentational/Search.jsx b/src/client/react/components/presentational/Search.jsx
index a713db4..01c6f7d 100644
--- a/src/client/react/components/presentational/Search.jsx
+++ b/src/client/react/components/presentational/Search.jsx
@@ -1,13 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import SearchIcon from 'react-icons/lib/md/search';
 
-const Search = ({ onInputChange, value, results }) => (
-  <div>
-    <input
-      onChange={onInputChange}
-      value={value}
-      placeholder="Zoeken"
-    />
+const Search = ({
+  onInputChange,
+  onFocus,
+  onBlur,
+  hasFocus,
+  value,
+  results,
+}) => (
+  <div className={classnames('search', { focus: hasFocus })}>
+    <div className="search__input-wrapper">
+      <div className="search__icon-wrapper"><SearchIcon /></div>
+      <input
+        onChange={onInputChange}
+        value={value}
+        placeholder="Zoeken"
+        onFocus={onFocus}
+        onBlur={onBlur}
+      />
+    </div>
     <ul>
       {results.map(result => <li key={result.name}>{result.name}</li>)}
     </ul>
@@ -16,10 +30,13 @@ const Search = ({ onInputChange, value, results }) => (
 
 Search.propTypes = {
   onInputChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func.isRequired,
+  onBlur: PropTypes.func.isRequired,
+  hasFocus: PropTypes.bool.isRequired,
   value: PropTypes.string.isRequired,
   results: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string.require,
-    type: PropTypes.string.require,
+    name: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
   })).isRequired,
 };