demo search ui implemented

src/routes/Search/Search.js

@@ -1,16 +1,24 @@
 const React = require('react');
-const { MainNavBar } = require('stremio/common');
+const { MainNavBar, MetaRow } = require('stremio/common');
+const useSearch = require('./useSearch');
 const styles = require('./styles');
 
-class Search extends React.Component {
+const Search = ({ queryParams }) => {
-    render() {
+    const groups = useSearch(queryParams.get('q'));
-        return (
+    return (
-            <React.Fragment>
+        <div className={styles['search-container']}>
-                <MainNavBar />
+            <MainNavBar className={styles['nav-bar']} />
-                <div className={styles['search-container']} />
+            <div className={styles['search-content']}>
-            </React.Fragment>
+                {groups.map((group, index) => (
-        );
+                    <MetaRow
-    }
+                        {...group}
+                        key={index}
+                        className={styles['search-row']}
+                    />
+                ))}
+            </div>
+        </div>
+    );
 }
 
 module.exports = Search;

src/routes/Search/styles.less

@@ -1,4 +1,40 @@
+:import('~stremio/common/MetaRow/styles.less') {
+    meta-item: meta-item;
+}
+
 .search-container {
-    background-color: var(--color-background);
+    display: flex;
+    flex-direction: column;
+    width: 100%;
     height: 100%;
+    background-color: var(--color-background);
+
+    .nav-bar {
+        flex: none;
+        align-self: stretch;
+    }
+
+    .search-content {
+        flex: 1;
+        align-self: stretch;
+        overflow-y: auto;
+
+        .search-row {
+            margin: 4rem 2rem;
+
+            &:first-child {
+                margin-top: 2rem;
+            }
+
+            &:last-child {
+                margin-bottom: 2rem;
+            }
+
+            .meta-item {
+                &:nth-child(n+6) {
+                    display: none;
+                }
+            }
+        }
+    }
 }

src/routes/Search/useSearch.js

@@ -0,0 +1,32 @@
+const React = require('react');
+
+const useSearch = (query) => {
+    const items = React.useMemo(() => {
+        return [
+            {
+                title: 'demo addon',
+                items: [
+                    {
+                        id: '1',
+                        type: 'movie',
+                        name: 'Stremio demo item movie 1',
+                        poster: '/images/intro_background.jpg',
+                        logo: '/images/default_avatar.png',
+                        posterShape: 'poster'
+                    },
+                    {
+                        id: '2',
+                        type: 'movie',
+                        name: 'Stremio demo item movie 2',
+                        poster: '/images/intro_background.jpg',
+                        logo: '/images/default_avatar.png',
+                        posterShape: 'poster'
+                    },
+                ]
+            }
+        ];
+    }, [query]);
+    return items;
+};
+
+module.exports = useSearch;