refactor(components): rewrite SocialLink component

* replace default label with a label prop
* rename name prop to icon prop

3 files changed, 89 insertions, 15 deletions

diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index 679896c..519bcac 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -65,6 +65,21 @@ const ContactPage: NextPageWithLayout = () => {
     title,
   });
   const schemaJsonLd = getSchemaJson([webpageSchema, contactSchema]);
+  const githubLabel = intl.formatMessage({
+    defaultMessage: 'Github profile',
+    description: 'ContactPage: Github profile link',
+    id: '75FYp7',
+  });
+  const gitlabLabel = intl.formatMessage({
+    defaultMessage: 'Gitlab profile',
+    description: 'ContactPage: Gitlab profile link',
+    id: '1V3CJf',
+  });
+  const linkedinLabel = intl.formatMessage({
+    defaultMessage: 'LinkedIn profile',
+    description: 'ContactPage: LinkedIn profile link',
+    id: 'Q3oEQn',
+  });
 
   const widgets = [
     <SocialMedia
@@ -73,10 +88,22 @@ const ContactPage: NextPageWithLayout = () => {
       title={socialMediaTitle}
       level={2}
       media={[
-        { name: 'Github', url: 'https://github.com/ArmandPhilippot' },
-        { name: 'Gitlab', url: 'https://gitlab.com/ArmandPhilippot' },
         {
-          name: 'LinkedIn',
+          icon: 'Github',
+          id: 'github',
+          label: githubLabel,
+          url: 'https://github.com/ArmandPhilippot',
+        },
+        {
+          icon: 'Gitlab',
+          id: 'gitlab',
+          label: gitlabLabel,
+          url: 'https://gitlab.com/ArmandPhilippot',
+        },
+        {
+          icon: 'LinkedIn',
+          id: 'linkedin',
+          label: linkedinLabel,
           url: 'https://www.linkedin.com/in/armandphilippot',
         },
       ]}
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index b23c7a2..84a1bb9 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -179,6 +179,22 @@ const CVPage: NextPageWithLayout = () => {
     }
   );
 
+  const githubLabel = intl.formatMessage({
+    defaultMessage: 'Github profile',
+    description: 'CVPage: Github profile link',
+    id: 'Jm0a6H',
+  });
+  const gitlabLabel = intl.formatMessage({
+    defaultMessage: 'Gitlab profile',
+    description: 'CVPage: Gitlab profile link',
+    id: '++U2Hm',
+  });
+  const linkedinLabel = intl.formatMessage({
+    defaultMessage: 'LinkedIn profile',
+    description: 'CVPage: LinkedIn profile link',
+    id: 'Sm2wCk',
+  });
+
   const widgets = [
     <ImageWidget
       // eslint-disable-next-line react/jsx-no-literals -- Key allowed
@@ -196,10 +212,22 @@ const CVPage: NextPageWithLayout = () => {
       title={socialMediaTitle}
       level={2}
       media={[
-        { name: 'Github', url: PERSONAL_LINKS.GITHUB },
-        { name: 'Gitlab', url: PERSONAL_LINKS.GITLAB },
         {
-          name: 'LinkedIn',
+          icon: 'Github',
+          id: 'github',
+          label: githubLabel,
+          url: PERSONAL_LINKS.GITHUB,
+        },
+        {
+          icon: 'Gitlab',
+          id: 'gitlab',
+          label: gitlabLabel,
+          url: PERSONAL_LINKS.GITLAB,
+        },
+        {
+          icon: 'LinkedIn',
+          id: 'linkedin',
+          label: linkedinLabel,
           url: PERSONAL_LINKS.LINKEDIN,
         },
       ]}
diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx
index 89891b3..ee86c7b 100644
--- a/src/pages/projets/[slug].tsx
+++ b/src/pages/projets/[slug].tsx
@@ -19,7 +19,6 @@ import {
   type ResponsiveImageProps,
   Sharing,
   SocialLink,
-  type SocialWebsite,
   Spinner,
   type MetaData,
   Heading,
@@ -30,7 +29,6 @@ import styles from '../../styles/pages/project.module.scss';
 import type { NextPageWithLayout, ProjectPreview, Repos } from '../../types';
 import { ROUTES } from '../../utils/constants';
 import {
-  capitalize,
   getSchemaJson,
   getSinglePageSchema,
   getWebPageSchema,
@@ -182,13 +180,34 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ project }) => {
    */
   const getReposLinks = (repositories: Repos): JSX.Element[] => {
     const links = [];
-
-    for (const [name, url] of Object.entries(repositories)) {
-      const socialWebsite = capitalize(name) as SocialWebsite;
-      const socialUrl = `https://${name}.com/${url}`;
-
-      links.push(<SocialLink name={socialWebsite} url={socialUrl} />);
-    }
+    const githubLabel = intl.formatMessage({
+      defaultMessage: 'Github profile',
+      description: 'ProjectsPage: Github profile link',
+      id: 'Nx8Jo5',
+    });
+    const gitlabLabel = intl.formatMessage({
+      defaultMessage: 'Gitlab profile',
+      description: 'ProjectsPage: Gitlab profile link',
+      id: 'sECHDg',
+    });
+
+    if (repositories.github)
+      links.push(
+        <SocialLink
+          icon="Github"
+          label={githubLabel}
+          url={repositories.github}
+        />
+      );
+
+    if (repositories.gitlab)
+      links.push(
+        <SocialLink
+          icon="Gitlab"
+          label={gitlabLabel}
+          url={repositories.gitlab}
+        />
+      );
 
     return links;
   };