diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js index 2ca29ba16..06870c1b2 100644 --- a/src/routes/Library/Library.js +++ b/src/routes/Library/Library.js @@ -1,16 +1,22 @@ const React = require('react'); -const { MainNavBar } = require('stremio/common'); +const { Dropdown, MainNavBar } = require('stremio/common'); +const useLibrary = require('./useLibrary'); const styles = require('./styles'); -class Library extends React.Component { - render() { - return ( -
- -
+const Library = ({ urlParams, queryParams }) => { + const [items, dropdowns] = useLibrary(urlParams.type, queryParams.get('sort')); + return ( +
+ +
+
+ {dropdowns.map((dropdown) => ( + + ))} +
- ); - } +
+ ); } module.exports = Library; diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index 67b751576..9e352f3d3 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -1,11 +1,43 @@ +@import (reference) 'common/screen-sizes.less'; + .library-container { - height: 100%; display: flex; flex-direction: column; + width: 100%; + height: 100%; background-color: var(--color-background); + .nav-bar { + flex: none; + align-self: stretch; + } + .library-content { flex: 1; align-self: stretch; + display: grid; + grid-template-columns: 1fr auto; + grid-template-rows: auto 1fr; + grid-template-areas: + "dropdowns-area switch-view-area" + "meta-items-area meta-items-area"; + + .dropdowns-container { + grid-area: dropdowns-area; + display: flex; + flex-direction: row; + margin: 2rem; + + .dropdown { + flex-grow: 0; + flex-shrink: 1; + flex-basis: 17rem; + height: 3rem; + + &:not(:last-child) { + margin-right: 1rem; + } + } + } } } \ No newline at end of file