Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

sample search input added to addons page

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-09-19 12:43:19 +03:00
parent ca2ca88a44
commit 608ffa19c9
2 changed files with 48 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/routes/Addons/Addons.js
View file

@ -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) => (

33
src/routes/Addons/styles.less
View file

@ -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);
}
}
}
}