summaryrefslogtreecommitdiffstats
path: root/src/components/atoms/links/sharing-link.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/atoms/links/sharing-link.tsx')
-rw-r--r--src/components/atoms/links/sharing-link.tsx48
1 files changed, 48 insertions, 0 deletions
diff --git a/src/components/atoms/links/sharing-link.tsx b/src/components/atoms/links/sharing-link.tsx
new file mode 100644
index 0000000..ca53ef9
--- /dev/null
+++ b/src/components/atoms/links/sharing-link.tsx
@@ -0,0 +1,48 @@
+import { FC } from 'react';
+import { useIntl } from 'react-intl';
+import styles from './sharing-link.module.scss';
+
+export type SharingMedium =
+ | 'diaspora'
+ | 'email'
+ | 'facebook'
+ | 'journal-du-hacker'
+ | 'linkedin'
+ | 'twitter';
+
+export type SharingLinkProps = {
+ /**
+ * The sharing medium id.
+ */
+ medium: SharingMedium;
+ /**
+ * The sharing url.
+ */
+ url: string;
+};
+
+/**
+ * SharingLink component
+ *
+ * Render a sharing link.
+ */
+const SharingLink: FC<SharingLinkProps> = ({ medium, url }) => {
+ const intl = useIntl();
+ const text = intl.formatMessage(
+ {
+ defaultMessage: 'Share on {name}',
+ description: 'Sharing: share on social network text',
+ id: 'ureXFw',
+ },
+ { name: medium }
+ );
+ const mediumClass = `link--${medium}`;
+
+ return (
+ <a href={url} className={`${styles.link} ${styles[mediumClass]}`}>
+ <span className="screen-reader-text">{text}</span>
+ </a>
+ );
+};
+
+export default SharingLink;