refactor: move ProfileLinks into its own component

src/components/Profile/Profile.css

@@ -21,22 +21,6 @@
   }
 }
 
-.profile__header__links a {
-  text-decoration: none;
-  color: inherit;
-}
-
-.profile__header__link {
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
-  padding: 0.125em;
-
-  span {
-    font-size: 14px;
-  }
-}
-
 .profile__block-container {
   display: flex;
   flex-direction: column;

src/components/Profile/Profile.tsx

@@ -1,12 +1,11 @@
 import "./Profile.css";
-import { FaGithub, FaLinkedin } from "react-icons/fa";
-import { FaSquareXTwitter } from "react-icons/fa6";
 import Title from "../Title/Title";
 import Bubble from "../Bubble/Bubble";
 import ProfileImage from "./ProfileImage/ProfileImage";
 import ProfileLanguages, {
   type Language,
 } from "./ProfileLanguages/ProfileLanguages";
+import ProfileLink, { ProfileLinkProps } from "./ProfileLink/ProfileLink";
 
 type TechnicalCategory = {
   category: string;
@@ -23,21 +22,14 @@ type Education = {
 type Data = {
   profile: {
     lines: string[];
-    linkedin: string;
-    github: string;
-    twitter: string;
+    links: ProfileLinkProps[];
   };
   technical: TechnicalCategory[];
   languages: Language[];
   education: Education[];
 };
 
-const ProfileHeader = ({
-  lines,
-  linkedin,
-  github,
-  twitter,
-}: Data["profile"]) => {
+const ProfileHeader = ({ lines, links }: Data["profile"]) => {
   return (
     <div className="profile__header">
       <ProfileImage circular={true} border={true} />
@@ -47,18 +39,9 @@ const ProfileHeader = ({
         ))}
       </div>
       <div className="profile__header__links">
-        <div className="profile__header__link">
-          <FaGithub />
-          <a href={`https://${github}`}>{github}</a>
-        </div>
-        <div className="profile__header__link">
-          <FaLinkedin />
-          <a href={`https://${linkedin}`}>{linkedin}</a>
-        </div>
-        <div className="profile__header__link">
-          <FaSquareXTwitter />
-          <a href={`https://${twitter}`}>{twitter}</a>
-        </div>
+        {links.map((link, index) => (
+          <ProfileLink key={index} type={link.type} link={link.link} />
+        ))}
       </div>
     </div>
   );

src/components/Profile/ProfileLink/ProfileLink.css

@@ -0,0 +1,15 @@
+.profile__header__link {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  padding: 0.125em;
+
+  span {
+    font-size: 14px;
+  }
+}
+
+.profile__header__link a {
+  text-decoration: none;
+  color: inherit;
+}

src/components/Profile/ProfileLink/ProfileLink.tsx

@@ -0,0 +1,38 @@
+import { FaGithub, FaHouseUser, FaLinkedin } from "react-icons/fa";
+import { FaSquareXTwitter } from "react-icons/fa6";
+import "./ProfileLink.css";
+
+export type ProfileLinkProps = {
+  /** Only GitHub Twitter LinkedIn Website */
+  type: string;
+  /** Please, use without https:// */
+  link: string;
+};
+
+const ProfileLink = ({ type, link }: ProfileLinkProps) => {
+  let icon;
+
+  switch (type) {
+    case "GitHub":
+      icon = <FaGithub />;
+      break;
+    case "Twitter":
+      icon = <FaSquareXTwitter />;
+      break;
+    case "LinkedIn":
+      icon = <FaLinkedin />;
+      break;
+    case "Website":
+      icon = <FaHouseUser />;
+      break;
+  }
+
+  return (
+    <div className="profile__header__link">
+      {icon}
+      <a href={`https://${link}`}>{type}</a>
+    </div>
+  );
+};
+
+export default ProfileLink;

src/data.json

@@ -163,9 +163,12 @@
       "+39 34 78 00 90 66",
       "[email protected]"
     ],
-    "linkedin": "linkedin.com/in/redacted",
-    "github": "github.com/redacted",
-    "twitter": "x.com/redacted"
+    "links": [
+      { "type": "LinkedIn", "link": "linkedin.com/in/redacted" },
+      { "type": "GitHub", "link": "github.com/redacted" },
+      { "type": "Twitter", "link": "x.com/redacted" },
+      { "type": "Website", "link": "website/portfolio" }
+    ]
   },
   "technical": [
     {