initial search bar feature added on new branch

src/components/SearchRow.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+const SearchRow = ({ description, category, location, date, query }) => {
+    function getHighlightedText(text, highlight) {
+        // Split text on highlight term, include term itself into parts, ignore case
+        const parts = text.split(new RegExp(`(${highlight})`, 'gi'));
+        return <span>{parts.map(part => part.toLowerCase() === highlight.toLowerCase() ? <span style={{backgroundColor: 'yellow', color: 'black'}}>{part}</span> : part)}</span>;
+    }
+
+    function getShortDescription(text, searchQuery) {
+        var regexp = new RegExp(`(([^ ]* ){0,6}[a-zA-Z]*${searchQuery.toLowerCase()}[a-zA-Z]*( [^ ]*){0,5})`, 'gm')
+        let parts = text.toLowerCase().match(regexp)
+        for (var x=0; x < (parts ? parts.length : 0); x++) {
+            parts[x] = '...'+parts[x]
+        }
+        const firstLine = [text.match('(([^ ]* ){0,10})', 'm')[0]]
+        return parts || firstLine;
+    }
+
+    return (
+        <div className='search-row'>
+            <div className='location-date-container'>
+                <div className='location-container'>
+                    <i className='material-icons'>location_on</i>
+                    <p>{getHighlightedText(location, query)}</p>
+                </div>
+                <div className='date-container'>
+                    <i className='material-icons'>event</i>
+                    <p>{getHighlightedText(date, query)}</p>
+                </div>
+            </div>
+            <p>{getShortDescription(description, query).map(match => {
+                return <span>{getHighlightedText(match, query)}...<br></br></span>
+            })}</p>
+        </div>
+    )
+}
+
+export default SearchRow