1 files changed, 53 insertions, 0 deletions
diff --git a/src/components/atoms/links/social-link.tsx b/src/components/atoms/links/social-link.tsx
new file mode 100644
index 0000000..464bc60
--- /dev/null
+++ b/src/components/atoms/links/social-link.tsx
@@ -0,0 +1,53 @@
+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 { FC } from 'react';
+import styles from './social-link.module.scss';
+
+export type SocialWebsite = 'Github' | 'Gitlab' | 'LinkedIn' | 'Twitter';
+
+export type SocialLinkProps = {
+  /**
+   * The social website name.
+   */
+  name: SocialWebsite;
+  /**
+   * The social profile url.
+   */
+  url: string;
+};
+
+/**
+ * SocialLink component
+ *
+ * Render a social icon link.
+ */
+const SocialLink: FC<SocialLinkProps> = ({ name, url }) => {
+  /**
+   * Retrieve a social link icon by id.
+   * @param {string} id - The social website id.
+   */
+  const getIcon = (id: string) => {
+    switch (id) {
+      case 'Github':
+        return <GithubIcon className={styles.icon} aria-hidden="true" />;
+      case 'Gitlab':
+        return <GitlabIcon className={styles.icon} aria-hidden="true" />;
+      case 'LinkedIn':
+        return <LinkedInIcon className={styles.icon} aria-hidden="true" />;
+      case 'Twitter':
+        return <TwitterIcon className={styles.icon} aria-hidden="true" />;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <a href={url} className={styles.link} aria-label={name}>
+      {getIcon(name)}
+    </a>
+  );
+};
+
+export default SocialLink;