Create Input component. Add filter to Table

app/src/App.css

@@ -36,3 +36,8 @@
     transform: rotate(360deg);
   }
 }
+
+::selection {
+  background-color: #14c5b5;
+  color: white;
+}

app/src/components/Input/index.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+
+import './styles.css';
+
+interface InputProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+  handleChange: (str: string) => void,
+  label?: string,
+  value?: string,
+}
+const Input: React.FunctionComponent<InputProps> = ({value, label, handleChange, ...rest}) => {
+  const [ text, setText ] = useState(value || '');
+
+  const handler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setText(event.target.value)
+    handleChange(event.target.value);
+  }
+
+  return (
+    <input className={'cc-input'} value={text} onChange={handler} {...rest}/>
+  )
+}
+
+export default Input;

app/src/components/Input/styles.css

@@ -0,0 +1,13 @@
+input.cc-input {
+  border-radius: 19% 14% 16% / 49% 37% 45% 41%;
+  box-shadow: none;
+  border: none;
+  padding: 1rem;
+  color: #686256;
+  height: 2.5rem;
+}
+
+input.cc-input:focus {
+  outline: none;
+  caret-color: #14c5b5;
+}

app/src/components/Table/index.tsx

@@ -3,6 +3,7 @@ import Critter, { Time, Month, Colors } from 'types';
 import { Table as Tb } from 'reactstrap';
 import Tag from 'components/Tag';
 import Button from 'components/Button';
+import Input from 'components/Input';
 import moment from 'moment';
 import { parseMonth } from 'services/DataParser';
 import { includes } from 'ramda';
@@ -82,16 +83,19 @@ const Table: FunctionComponent<TableProps> = ({ data }) => {
 
   const [ state, setState ] = useState<{
     critters: Critter[],
-    relevant: Critter[]
+    relevant: Critter[],
+    search: string,
   }>({
     critters: data,
     relevant: data,
+    search: ''
   });
 
   useEffect(() => {
     setState({
+      ...state,
       relevant: data,
-      critters: data
+      critters: data,
     })
   }, [data]);
 
@@ -113,9 +117,23 @@ const Table: FunctionComponent<TableProps> = ({ data }) => {
     })
   }
 
+  const search = () => {
+    const { critters, search } = state;
+    const result = critters.filter(critter => includes(search.toLowerCase(), critter.location.toLowerCase()) || includes(search.toLowerCase(), critter.name.toLowerCase()));
+  
+    setState({
+      ...state,
+      relevant: result
+    })
+  }
+
   return (
     <div className="cc-critter-schedule">
       <div className="cc-critter-schedule-actions">
+        <div className="cc-critter-schedule-actions-search">
+          <Input value={state.search} handleChange={(_filter) => { setState({...state, search: _filter})}}/>
+          <Button onClick={() => search()}>search</Button>
+        </div>
         <Button onClick={() => { availableNow() }} color="primary">Available now</Button>
         <Button onClick={() => { showAll() }}>Show all</Button>
       </div>

app/src/components/Table/styles.css

@@ -35,4 +35,9 @@
 td.critter-img img {
   width: 48px;
   height: auto;
+}
+
+.cc-critter-schedule-actions {
+  display: flex;
+  justify-content: space-between;
 }