twenty/front/src/modules/ui/navigation/link/components/SocialLink.tsx

import * as React from 'react';
import styled from '@emotion/styled';

import { RoundedLink } from './RoundedLink';

export enum LinkType {
  Url = 'url',
  LinkedIn = 'linkedin',
  Twitter = 'twitter',
}

type SocialLinkProps = {
  href: string;
  children?: React.ReactNode;
  type?: LinkType;
  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
};

const StyledRawLink = styled(RoundedLink)`
  overflow: hidden;

  a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
`;

export const SocialLink = ({
  children,
  href,
  onClick,
  type,
}: SocialLinkProps) => {
  let displayValue = children;

  if (type === 'linkedin') {
    const matches = href.match(
      /(?:https?:\/\/)?(?:www.)?linkedin.com\/(?:in|company)\/([-a-zA-Z0-9@:%_+.~#?&//=]*)/,
    );
    if (matches && matches[1]) {
      displayValue = matches[1];
    } else {
      displayValue = 'LinkedIn';
    }
  }

  if (type === 'twitter') {
    const matches = href.match(
      /(?:https?:\/\/)?(?:www.)?twitter.com\/([-a-zA-Z0-9@:%_+.~#?&//=]*)/,
    );
    if (matches && matches[1]) {
      displayValue = `@${matches[1]}`;
    } else {
      displayValue = '@twitter';
    }
  }

  return (
    <StyledRawLink href={href} onClick={onClick}>
      {displayValue}
    </StyledRawLink>
  );
};