diff --git a/src/common/LibraryItemGrid/LibraryItemGrid.js b/src/common/LibraryItemGrid/LibraryItemGrid.js
new file mode 100644
index 000000000..3c170cbf5
--- /dev/null
+++ b/src/common/LibraryItemGrid/LibraryItemGrid.js
@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Icon from 'stremio-icons/dom';
+import styles from './styles';
+
+class LibraryItemGrid extends Component {
+ renderPlay() {
+ return (
+
+
+
+ );
+ }
+
+ render() {
+ return (
+
+ {this.renderPlay()}
+
+ );
+ }
+}
+
+LibraryItemGrid.propTypes = {
+ poster: PropTypes.string.isRequired
+};
+LibraryItemGrid.defaultProps = {
+ poster: ''
+};
+
+export default LibraryItemGrid;
\ No newline at end of file
diff --git a/src/common/LibraryItemGrid/index.js b/src/common/LibraryItemGrid/index.js
new file mode 100644
index 000000000..4bd7c68bd
--- /dev/null
+++ b/src/common/LibraryItemGrid/index.js
@@ -0,0 +1,3 @@
+import LibraryItemGrid from './LibraryItemGrid';
+
+export default LibraryItemGrid;
\ No newline at end of file
diff --git a/src/common/LibraryItemGrid/styles.less b/src/common/LibraryItemGrid/styles.less
new file mode 100644
index 000000000..160d0e107
--- /dev/null
+++ b/src/common/LibraryItemGrid/styles.less
@@ -0,0 +1,36 @@
+@import 'stremio-colors';
+.library-item {
+ width: 150px;
+ height: 222px;
+ float: left;
+ margin: 8px;
+ display: flex;
+ background-size: cover;
+ background-position: center;
+ transition: transform 0.4s ease-in-out;
+ .play-container {
+ width: 70px;
+ height: 70px;
+ margin: auto;
+ display: flex;
+ .play {
+ width: 26px;
+ height: 26px;
+ margin: auto;
+ margin-left: 26px;
+ fill: @colortransparent;
+ }
+ }
+ &:hover, &:focus {
+ cursor: pointer;
+ transform: scale(1.11);
+ border: 1px solid @colorwhite;
+ .play-container {
+ border-radius: 50%;
+ background-color: @colorwhite;
+ .play {
+ fill: @colormedium;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/common/index.js b/src/common/index.js
index 91ae89c6d..fa061d94d 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -7,6 +7,7 @@ import Router from './Router';
import Stream from './Stream';
import Episode from './Episode';
import LibraryItemList from './LibraryItemList';
+import LibraryItemGrid from './LibraryItemGrid';
export {
Checkbox,
@@ -17,5 +18,6 @@ export {
Router,
Stream,
Episode,
- LibraryItemList
+ LibraryItemList,
+ LibraryItemGrid
};
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index 0c1a5aac6..08bb0de3e 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -4,6 +4,7 @@ import { addons } from 'stremio-services';
import { Stream } from 'stremio-common';
import { Episode } from 'stremio-common';
import { LibraryItemList } from 'stremio-common';
+import { LibraryItemGrid } from 'stremio-common';
class Board extends PureComponent {
constructor(props) {
@@ -32,10 +33,16 @@ class Board extends PureComponent {
render() {
return (
-
-
-
-
+
+
+
+
+
+
+
+
+
+
);
}