SearchBar component implemented

src/common/SearchBar/SearchBar.js

@@ -0,0 +1,33 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
+const Icon = require('stremio-icons/dom');
+const TextInput = require('stremio/common/TextInput');
+const SearchBarPlaceholder = require('./SearchBarPlaceholder');
+const styles = require('./styles');
+
+const SearchBar = ({ className, title, search, searchInputOnChange }) => {
+    return (
+        <label title={title} className={classnames(className, styles['search-bar-container'])}>
+            <TextInput
+                className={styles['search-input']}
+                type={'text'}
+                placeholder={title}
+                value={search}
+                onChange={searchInputOnChange}
+            />
+            <Icon className={styles['icon']} icon={'ic_search'} />
+        </label>
+    );
+};
+
+SearchBar.Placeholder = SearchBarPlaceholder;
+
+SearchBar.propTypes = {
+    className: PropTypes.string,
+    title: PropTypes.string,
+    search: PropTypes.string,
+    searchInputOnChange: PropTypes.func
+};
+
+module.exports = SearchBar;

src/common/SearchBar/index.js

@@ -0,0 +1,3 @@
+const SearchBar = require('./SearchBar');
+
+module.exports = SearchBar;

src/common/SearchBar/styles.less

@@ -0,0 +1,41 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
+.search-bar-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.5rem;
+    padding: 0 1rem;
+    border-radius: 3.5rem;
+    border: var(--focus-outline-size) solid transparent;
+    background-color: @color-background;
+    cursor: text;
+
+    &:hover, &:focus-within {
+        background-color: @color-background-light1;
+    }
+
+    &:focus-within {
+        border: var(--focus-outline-size) solid @color-surface-light5;
+    }
+
+    .search-input {
+        flex: 1;
+        margin-right: 1rem;
+        font-size: 1.1rem;
+        color: @color-surface-light5;
+
+        &::placeholder {
+            max-height: 1.2em;
+            opacity: 1;
+            color: @color-secondaryvariant1-light1-90;
+        }
+    }
+
+    .icon {
+        flex: none;
+        width: 1.5rem;
+        height: 1.5rem;
+        fill: @color-secondaryvariant1-90;
+    }
+}

src/common/index.js

@@ -14,6 +14,7 @@ const { HorizontalNavBar, VerticalNavBar } = require('./NavBar');
 const PaginationInput = require('./PaginationInput');
 const PlayIconCircleCentered = require('./PlayIconCircleCentered');
 const Popup = require('./Popup');
+const SearchBar = require('./SearchBar');
 const SharePrompt = require('./SharePrompt');
 const Slider = require('./Slider');
 const TextInput = require('./TextInput');
@@ -51,6 +52,7 @@ module.exports = {
     PaginationInput,
     PlayIconCircleCentered,
     Popup,
+    SearchBar,
     SharePrompt,
     Slider,
     TextInput,