MetaLinks sum component implemented

src/common/MetaPreview/MetaLinks/MetaLinks.js

@@ -0,0 +1,42 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
+const Button = require('stremio/common/Button');
+const styles = require('./styles');
+
+const MetaLinks = ({ className, label = '', links = [] }) => {
+    return (
+        <div className={classnames(className, styles['meta-links-container'])}>
+            {
+                typeof label === 'string' && label.length > 0 ?
+                    <div className={styles['label']}>{label}:</div>
+                    :
+                    null
+            }
+            {
+                Array.isArray(links) && links.length > 0 ?
+                    <div className={styles['links-container']}>
+                        {links.map(({ label, href }, index) => (
+                            <Button key={`${label}-${href}-${index}`} className={styles['link']} title={label} tabIndex={-1} href={href}>
+                                {label}
+                                {index < links.length - 1 ? ',' : null}
+                            </Button>
+                        ))}
+                    </div>
+                    :
+                    null
+            }
+        </div>
+    );
+};
+
+MetaLinks.propTypes = {
+    className: PropTypes.string,
+    label: PropTypes.string,
+    links: PropTypes.arrayOf(PropTypes.shape({
+        label: PropTypes.string,
+        href: PropTypes.string
+    }))
+};
+
+module.exports = MetaLinks;

src/common/MetaPreview/MetaLinks/index.js

@@ -0,0 +1,3 @@
+const MetaLinks = require('./MetaLinks');
+
+module.exports = MetaLinks;

src/common/MetaPreview/MetaLinks/styles.less

@@ -0,0 +1,26 @@
+.meta-links-container {
+    .label {
+        margin-bottom: 0.2rem;
+        font-size: 1.2rem;
+    }
+
+    .links-container {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        .link {
+            flex-grow: 0;
+            flex-shrink: 1;
+            margin-right: 0.5rem;
+            margin-bottom: 0.2rem;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            color: var(--color-surfacelighter);
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+}