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