diff --git a/src/common/ShareAddon/ShareAddon.js b/src/common/ShareAddon/ShareAddon.js
new file mode 100644
index 000000000..4b3509f40
--- /dev/null
+++ b/src/common/ShareAddon/ShareAddon.js
@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Icon from 'stremio-icons/dom';
+import styles from './styles';
+
+class ShareAddon extends Component {
+ renderX() {
+ return(
+
+
+
+ );
+ }
+
+ renderShareLabel() {
+ return (
+ Share Add-on
+ );
+ }
+
+ renderButtons() {
+ return (
+
+
+ FACEBOOK
+
+
+ TWITTER
+
+
+ GOOGLE+
+
+
+ );
+ }
+
+ renderUrl() {
+ if(this.props.url.length === 0) {
+ return null;
+ }
+
+ return (
+
+
+ Copy
+
+ );
+ }
+
+ render() {
+ return (
+
+ {this.renderX()}
+
+ {this.renderShareLabel()}
+ {this.renderButtons()}
+ {this.renderUrl()}
+
+
+ );
+ }
+}
+
+ShareAddon.propTypes = {
+ url: PropTypes.string.isRequired
+};
+ShareAddon.defaultProps = {
+ url: ''
+};
+
+export default ShareAddon;
\ No newline at end of file
diff --git a/src/common/ShareAddon/index.js b/src/common/ShareAddon/index.js
new file mode 100644
index 000000000..f5ae618df
--- /dev/null
+++ b/src/common/ShareAddon/index.js
@@ -0,0 +1,3 @@
+import ShareAddon from './ShareAddon';
+
+export default ShareAddon;
diff --git a/src/common/ShareAddon/styles.less b/src/common/ShareAddon/styles.less
new file mode 100644
index 000000000..62b6d119b
--- /dev/null
+++ b/src/common/ShareAddon/styles.less
@@ -0,0 +1,80 @@
+@import 'stremio-colors';
+.share-addon {
+ width: 380px;
+ height: 200px;
+ padding: 10px;
+ color: @colorwhite;
+ background-color: @colorwhite;
+ .x-container {
+ display: flex;
+ justify-content: flex-end;
+ .x-icon {
+ height: 10px;
+ fill: @colorneutrallight;
+ }
+ }
+ .info-container {
+ padding: 6px 20px 0px 20px;
+ .share-label {
+ color: @colorblack;
+ font-weight: 600;
+ }
+ .buttons {
+ display: flex;
+ font-size: 11px;
+ margin: 22px 0px;
+ font-family: LatoLight;
+ justify-content: space-between;
+ .facebook-icon, .twitter-icon, .gplus-icon {
+ width: 14px;
+ height: 14px;
+ margin-right: 6px;
+ fill: @colorwhite;
+ }
+ .facebook-button {
+ background-color: @colorfb;
+ }
+ .twitter-button {
+ background-color: @coloraccent;
+ }
+ .gplus-button {
+ background-color: #dd4b39;
+ }
+ .facebook-button, .twitter-button, .gplus-button {
+ display: flex;
+ cursor: pointer;
+ width: 100px;
+ height: 32px;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+ .url-container {
+ display: flex;
+ border-radius: 4px;
+ text-align: center;
+ border: 1px solid @colorneutrallight;
+ .url, .copy-label {
+ padding: 10px;
+ font-weight: 600;
+ color: @colorblack40;
+ }
+ .url {
+ width: 90%;
+ outline: none;
+ font-size: 12px;
+ text-align: center;
+ border-radius: 4px;
+ padding-right: 30px;
+ text-overflow: ellipsis;
+ }
+ .copy-label {
+ width: 30%;
+ cursor: pointer;
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ background-color: @colorblack20;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/common/index.js b/src/common/index.js
index 4bbbfb998..a5122e878 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -9,6 +9,7 @@ import Episode from './Episode';
import LibraryItemList from './LibraryItemList';
import LibraryItemGrid from './LibraryItemGrid';
import Addon from './Addon';
+import ShareAddon from './ShareAddon';
export {
Checkbox,
@@ -21,5 +22,6 @@ export {
Episode,
LibraryItemList,
LibraryItemGrid,
- Addon
+ Addon,
+ ShareAddon
};
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index b3fef6eb7..e3534888c 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -6,6 +6,7 @@ import { Episode } from 'stremio-common';
import { LibraryItemList } from 'stremio-common';
import { LibraryItemGrid } from 'stremio-common';
import { Addon } from 'stremio-common';
+import { ShareAddon } from 'stremio-common';
class Board extends PureComponent {
constructor(props) {
@@ -34,10 +35,7 @@ class Board extends PureComponent {
render() {
return (
);
}