From e13c37ac8155f6d7db9be25b9313428fccdcfa9b Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Mon, 26 Aug 2019 12:56:47 +0300
Subject: [PATCH] MetaLinks sum component implemented

---
 src/common/MetaPreview/MetaLinks/MetaLinks.js | 42 +++++++++++++++++++
 src/common/MetaPreview/MetaLinks/index.js     |  3 ++
 src/common/MetaPreview/MetaLinks/styles.less  | 26 ++++++++++++
 3 files changed, 71 insertions(+)
 create mode 100644 src/common/MetaPreview/MetaLinks/MetaLinks.js
 create mode 100644 src/common/MetaPreview/MetaLinks/index.js
 create mode 100644 src/common/MetaPreview/MetaLinks/styles.less

diff --git a/src/common/MetaPreview/MetaLinks/MetaLinks.js b/src/common/MetaPreview/MetaLinks/MetaLinks.js
new file mode 100644
index 000000000..8d526d77d
--- /dev/null
+++ b/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;
diff --git a/src/common/MetaPreview/MetaLinks/index.js b/src/common/MetaPreview/MetaLinks/index.js
new file mode 100644
index 000000000..403239952
--- /dev/null
+++ b/src/common/MetaPreview/MetaLinks/index.js
@@ -0,0 +1,3 @@
+const MetaLinks = require('./MetaLinks');
+
+module.exports = MetaLinks;
diff --git a/src/common/MetaPreview/MetaLinks/styles.less b/src/common/MetaPreview/MetaLinks/styles.less
new file mode 100644
index 000000000..030c751a5
--- /dev/null
+++ b/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;
+            }
+        }
+    }
+}
\ No newline at end of file