Sample board implemented

src/routes/Board/Board.js

@@ -1,10 +1,68 @@
 import React, { PureComponent } from 'react';
+import { MetaItem } from 'stremio-common';
+import styles from './styles';
 
 class Board extends PureComponent {
+    constructor(props) {
+        super(props);
+
+        this.items = {
+            cw: [
+                {
+                    id: 'cw1',
+                    posterShape: 'poster',
+                    type: 'movie',
+                    progress: 0.4,
+                    title: 'Movie title'
+                }
+            ]
+        };
+        this.cwMenu = [
+            {
+                label: 'Play',
+                onSelect: (event) => {
+                    console.log('Play', {
+                        defaultPrevented: event.isDefaultPrevented(),
+                        propagationStopped: event.isPropagationStopped()
+                    });
+                }
+            },
+            {
+                label: 'Dismiss',
+                onSelect: (event) => {
+                    console.log('Dismiss', {
+                        defaultPrevented: event.isDefaultPrevented(),
+                        propagationStopped: event.isPropagationStopped()
+                    });
+                }
+            }
+        ];
+    }
+
+    onClick = (event) => {
+        console.log('onClick', {
+            id: event.currentTarget.dataset.metaItemId,
+            defaultPrevented: event.isDefaultPrevented(),
+            propagationStopped: event.isPropagationStopped()
+        });
+    }
+
     render() {
         return (
-            <div style={{ paddingTop: 40, color: 'yellow' }}>
-                Board
+            <div className={styles['board-container']}>
+                <div className={styles['continue-watching-row']}>
+                    {this.items.cw.map((props) => (
+                        <MetaItem
+                            key={props.id}
+                            className={styles['meta-item-container']}
+                            popupClassName={styles['meta-item-popup-container']}
+                            relativeSize={'height'}
+                            menu={this.cwMenu}
+                            onClick={this.onClick}
+                            {...props}
+                        />
+                    ))}
+                </div>
             </div>
         );
     }

src/routes/Board/styles.less

@@ -0,0 +1,30 @@
+.board-container, .meta-item-popup-container {
+    --poster-relative-size: 180px;
+    --progress-bar-size: 6px;
+    font-size: 12px;
+
+    .continue-watching-row {
+        --poster-relative-size: calc(180px * var(--poster-shape-ratio));
+    }
+
+    .search-row {
+        --poster-relative-size: 220px;
+    }
+}
+
+.board-container {
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: scroll;
+
+    .continue-watching-row, .search-row {
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+    }
+
+    .meta-item-container {
+        margin: 10px;
+    }
+}