From 55bacef0a18f8c7292c8fcdb24e6ec3a4403141d Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 2 Apr 2020 13:07:55 +0300
Subject: [PATCH] SearchBar component implemented

---
 src/common/SearchBar/SearchBar.js | 33 +++++++++++++++++++++++++
 src/common/SearchBar/index.js     |  3 +++
 src/common/SearchBar/styles.less  | 41 +++++++++++++++++++++++++++++++
 src/common/index.js               |  2 ++
 4 files changed, 79 insertions(+)
 create mode 100644 src/common/SearchBar/SearchBar.js
 create mode 100644 src/common/SearchBar/index.js
 create mode 100644 src/common/SearchBar/styles.less

diff --git a/src/common/SearchBar/SearchBar.js b/src/common/SearchBar/SearchBar.js
new file mode 100644
index 000000000..d672ddc5c
--- /dev/null
+++ b/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;
diff --git a/src/common/SearchBar/index.js b/src/common/SearchBar/index.js
new file mode 100644
index 000000000..c6a6a7609
--- /dev/null
+++ b/src/common/SearchBar/index.js
@@ -0,0 +1,3 @@
+const SearchBar = require('./SearchBar');
+
+module.exports = SearchBar;
diff --git a/src/common/SearchBar/styles.less b/src/common/SearchBar/styles.less
new file mode 100644
index 000000000..784673042
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/src/common/index.js b/src/common/index.js
index 81b0c1d16..4edbb546e 100644
--- a/src/common/index.js
+++ b/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,