chore: add a social media widget on contact and cv pages

3 files changed, 121 insertions, 1 deletions

diff --git a/src/components/Widget/SocialMedia/SocialMedia.module.scss b/src/components/Widget/SocialMedia/SocialMedia.module.scss
new file mode 100644
index 0000000..70ef5d9
--- /dev/null
+++ b/src/components/Widget/SocialMedia/SocialMedia.module.scss
@@ -0,0 +1,47 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/placeholders";
+
+.list {
+  @extend %flex-list;
+
+  gap: var(--spacing-xs);
+  align-items: center;
+}
+
+.link {
+  display: block;
+  width: 3em;
+  height: 3em;
+  background: none;
+  box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
+      var(--color-shadow-light),
+    fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-1)
+      var(--color-shadow-light),
+    fun.convert-px(3) fun.convert-px(4) fun.convert-px(4) fun.convert-px(-3)
+      var(--color-shadow-light),
+    0 0 0 0 var(--color-shadow);
+  transition: all 0.3s linear 0s;
+
+  &:hover,
+  &:focus {
+    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
+        var(--color-shadow-light),
+      fun.convert-px(1) fun.convert-px(1) fun.convert-px(2) fun.convert-px(-1)
+        var(--color-shadow-lighter),
+      fun.convert-px(3) fun.convert-px(3) fun.convert-px(4) fun.convert-px(-4)
+        var(--color-shadow-lighter),
+      fun.convert-px(6) fun.convert-px(6) fun.convert-px(10) fun.convert-px(-3)
+        var(--color-shadow-light);
+    transform: scale(1.15);
+  }
+
+  &:focus {
+    outline: var(--color-primary) dashed fun.convert-px(2);
+  }
+
+  &:active {
+    box-shadow: 0 0 0 0 var(--color-shadow-light);
+    outline: none;
+    transform: scale(0.9);
+  }
+}
diff --git a/src/components/Widget/SocialMedia/SocialMedia.tsx b/src/components/Widget/SocialMedia/SocialMedia.tsx
new file mode 100644
index 0000000..9ca0627
--- /dev/null
+++ b/src/components/Widget/SocialMedia/SocialMedia.tsx
@@ -0,0 +1,72 @@
+import { socialWebsites } from '@config/social-media';
+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 './SocialMedia.module.scss';
+
+const SocialMedia = ({
+  title,
+  github = false,
+  gitlab = false,
+  linkedin = false,
+  twitter = false,
+}: {
+  title: string;
+  github?: boolean;
+  gitlab?: boolean;
+  linkedin?: boolean;
+  twitter?: boolean;
+}) => {
+  const getIcon = (id: string) => {
+    switch (id) {
+      case 'github':
+        return <GithubIcon />;
+      case 'gitlab':
+        return <GitlabIcon />;
+      case 'linkedin':
+        return <LinkedInIcon />;
+      case 'twitter':
+        return <TwitterIcon />;
+      default:
+        break;
+    }
+  };
+
+  const shouldDisplayLink = (id: string) => {
+    switch (id) {
+      case 'github':
+        return github;
+      case 'gitlab':
+        return gitlab;
+      case 'linkedin':
+        return linkedin;
+      case 'twitter':
+        return twitter;
+      default:
+        break;
+    }
+  };
+
+  const items = socialWebsites.map((website) => {
+    return shouldDisplayLink(website.id) ? (
+      <li key={website.id}>
+        <a href={website.url} className={styles.link}>
+          {getIcon(website.id)}
+          <span className="screen-reader-text">{website.name}</span>
+        </a>
+      </li>
+    ) : (
+      ''
+    );
+  });
+
+  return (
+    <div>
+      <h2>{title}</h2>
+      <ul className={styles.list}>{items}</ul>
+    </div>
+  );
+};
+
+export default SocialMedia;
diff --git a/src/components/Widget/index.tsx b/src/components/Widget/index.tsx
index d5374ea..9df51e3 100644
--- a/src/components/Widget/index.tsx
+++ b/src/components/Widget/index.tsx
@@ -1,6 +1,7 @@
 import RecentPosts from './RecentPosts/RecentPosts';
 import Sharing from './Sharing/Sharing';
+import SocialMedia from './SocialMedia/SocialMedia';
 import ThematicsList from './ThematicsList/ThematicsList';
 import TopicsList from './TopicsList/TopicsList';
 
-export { RecentPosts, Sharing, ThematicsList, TopicsList };
+export { RecentPosts, Sharing, SocialMedia, ThematicsList, TopicsList };