SearchBarPlaceholder implemented

src/common/SearchBar/SearchBarPlaceholder/SearchBarPlaceholder.js

@@ -0,0 +1,21 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
+const Icon = require('stremio-icons/dom');
+const styles = require('./styles');
+
+const SearchBarPlaceholder = ({ className, title }) => {
+    return (
+        <div className={classnames(className, styles['search-bar-container'])}>
+            <div className={styles['search-input']}>{title}</div>
+            <Icon className={styles['icon']} icon={'ic_search'} />
+        </div>
+    );
+};
+
+SearchBarPlaceholder.propTypes = {
+    className: PropTypes.string,
+    title: PropTypes.string
+};
+
+module.exports = SearchBarPlaceholder;

src/common/SearchBar/SearchBarPlaceholder/index.js

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

src/common/SearchBar/SearchBarPlaceholder/styles.less

@@ -0,0 +1,25 @@
+.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: var(--color-placeholder-background);
+
+    .search-input {
+        flex: 1;
+        max-height: 1.2em;
+        margin-right: 1rem;
+        font-size: 1.1rem;
+        color: var(--color-placeholder-text);
+    }
+
+    .icon {
+        flex: none;
+        width: 1.5rem;
+        height: 1.5rem;
+        fill: var(--color-placeholder-background);
+    }
+}