From 608ffa19c9e5ee78985816cfef15e064a506bc0d Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 19 Sep 2019 12:43:19 +0300
Subject: [PATCH] sample search input added to addons page

---
 src/routes/Addons/Addons.js   | 18 ++++++++++++++++--
 src/routes/Addons/styles.less | 33 ++++++++++++++++++++++++++++++++-
 2 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index f3c11713a..dae5d7b30 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -1,11 +1,15 @@
 const React = require('react');
 const Icon = require('stremio-icons/dom');
-const { Button, Dropdown, NavBar } = require('stremio/common');
+const { Button, Dropdown, NavBar, TextInput } = require('stremio/common');
 const Addon = require('./Addon');
 const useAddons = require('./useAddons');
 const styles = require('./styles');
 
 const Addons = ({ urlParams }) => {
+    const [query, setQuery] = React.useState('');
+    const queryOnChange = React.useCallback((event) => {
+        setQuery(event.currentTarget.value);
+    }, []);
     const [addons, dropdowns] = useAddons(urlParams.category, urlParams.type);
     return (
         <div className={styles['addons-container']}>
@@ -19,7 +23,17 @@ const Addons = ({ urlParams }) => {
                     {dropdowns.map((dropdown) => (
                         <Dropdown {...dropdown} key={dropdown.name} className={styles['dropdown']} />
                     ))}
-                    <div className={styles['search-bar-container']} />
+                    <label className={styles['search-bar-container']}>
+                        <Icon className={styles['icon']} icon={'ic_search'} />
+                        <TextInput
+                            className={styles['search-input']}
+                            tabIndex={-1}
+                            type={'text'}
+                            placeholder={'Search addons...'}
+                            value={query}
+                            onChange={queryOnChange}
+                        />
+                    </label>
                 </div>
                 <div className={styles['addons-list-container']} >
                     {addons.map((addon) => (
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 1e9edc91a..682d9cbb0 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -63,8 +63,39 @@
             .search-bar-container {
                 flex-grow: 0;
                 flex-shrink: 1;
-                flex-basis: 19rem;
+                flex-basis: 15rem;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
                 height: 3rem;
+                margin-right: 1rem;
+                padding: 0 1rem;
+                background-color: var(--color-backgroundlighter);
+                cursor: text;
+
+                &:hover, &:focus-within {
+                    background-color: var(--color-surfacedarker60);
+                }
+
+                .icon {
+                    display: block;
+                    width: 1.2rem;
+                    height: 1.2rem;
+                    margin-right: 1rem;
+                    fill: var(--color-surfacelighter);
+                }
+
+                .search-input {
+                    flex: 1;
+                    align-self: stretch;
+                    color: var(--color-surfacelighter);
+
+                    &::placeholder {
+                        max-height: 1.2em;
+                        opacity: 1;
+                        color: var(--color-surfacelight);
+                    }
+                }
             }
         }