diff options
Diffstat (limited to 'src/components/atoms/links/sharing-link.tsx')
| -rw-r--r-- | src/components/atoms/links/sharing-link.tsx | 48 | 
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; | 
