1 files changed, 65 insertions, 0 deletions
diff --git a/src/components/atoms/links/social-link/social-link.tsx b/src/components/atoms/links/social-link/social-link.tsx
new file mode 100644
index 0000000..1da1e7d
--- /dev/null
+++ b/src/components/atoms/links/social-link/social-link.tsx
@@ -0,0 +1,65 @@
+import type { AnchorHTMLAttributes, FC } from 'react';
+import GithubIcon from '../../../../assets/images/social-media/github.svg';
+import GitlabIcon from '../../../../assets/images/social-media/gitlab.svg';
+import LinkedInIcon from '../../../../assets/images/social-media/linkedin.svg';
+import TwitterIcon from '../../../../assets/images/social-media/twitter.svg';
+import styles from './social-link.module.scss';
+
+export type SocialWebsite = 'Github' | 'Gitlab' | 'LinkedIn' | 'Twitter';
+
+export type SocialLinkProps = Omit<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
+  'aria-label' | 'children' | 'href'
+> & {
+  /**
+   * The social link icon.
+   */
+  icon: SocialWebsite;
+  /**
+   * An accessible label for the link.
+   */
+  label: string;
+  /**
+   * The social profile url.
+   */
+  url: string;
+};
+
+/**
+ * SocialLink component
+ *
+ * Render a social icon link.
+ */
+export const SocialLink: FC<SocialLinkProps> = ({
+  className = '',
+  icon,
+  label,
+  url,
+  ...props
+}) => {
+  const linkClass = `${styles.link} ${className}`;
+
+  /**
+   * Retrieve a social link icon by id.
+   * @param {string} id - The social website id.
+   */
+  const getIcon = (id: string) => {
+    switch (id) {
+      case 'Github':
+        return <GithubIcon aria-hidden className={styles.icon} />;
+      case 'Gitlab':
+        return <GitlabIcon aria-hidden className={styles.icon} />;
+      case 'LinkedIn':
+        return <LinkedInIcon aria-hidden className={styles.icon} />;
+      case 'Twitter':
+      default:
+        return <TwitterIcon aria-hidden className={styles.icon} />;
+    }
+  };
+
+  return (
+    <a {...props} aria-label={label} className={linkClass} href={url}>
+      {getIcon(icon)}
+    </a>
+  );
+};