Refactored code into a single ProfileLinks component, excluding repea…

…ted code.
alcpereira · Aug 23, 2024 · bebbd58 · bebbd58
1 parent fc79c9a
commit bebbd58
Show file tree

Hide file tree

Showing 10 changed files with 45 additions and 109 deletions.
diff --git a/src/components/Links/GitHub/GitHub.tsx b/src/components/Links/GitHub/GitHub.tsx
diff --git a/src/components/Links/LinkedIn/LinkedIn.css b/src/components/Links/LinkedIn/LinkedIn.css
diff --git a/src/components/Links/LinkedIn/LinkedIn.tsx b/src/components/Links/LinkedIn/LinkedIn.tsx
diff --git a/src/components/Links/Website/Website.css b/src/components/Links/Website/Website.css
diff --git a/src/components/Links/Website/Website.tsx b/src/components/Links/Website/Website.tsx
diff --git a/src/components/Links/X-Twitter/XTwitter.css b/src/components/Links/X-Twitter/XTwitter.css
diff --git a/src/components/Links/X-Twitter/XTwitter.tsx b/src/components/Links/X-Twitter/XTwitter.tsx
diff --git a/src/components/Profile/Profile.tsx b/src/components/Profile/Profile.tsx
@@ -1,16 +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 GitHub from "../Links/GitHub/GitHub";
-import LinkedIn from "../Links/LinkedIn/LinkedIn";
-import XTwitter from "../Links/X-Twitter/XTwitter";
-import Website from "../Links/Website/Website";
+import ProfileLink from "./ProfileLink/ProfileLink";
 
 type TechnicalCategory = {
   category: string;
@@ -44,6 +39,13 @@ const ProfileHeader = ({
   twitter,
   website,
 }: Data["profile"]) => {
+  const profileLinks = {
+    github,
+    linkedin,
+    twitter,
+    website,
+  };
+
   return (
     <div className="profile__header">
       <ProfileImage circular={true} border={true} />
@@ -53,10 +55,7 @@ const ProfileHeader = ({
         ))}
       </div>
       <div className="profile__header__links">
-        <GitHub githubLink={github} />
-        <LinkedIn linkedinLink={linkedin} />
-        <XTwitter xtwitterLink={twitter} />
-        <Website websiteLink={website} />
+        <ProfileLink links={profileLinks} />
       </div>
     </div>
   );

diff --git a/src/components/Links/GitHub/GitHub.css → ...nents/Profile/ProfileLink/ProfileLink.css b/src/components/Links/GitHub/GitHub.css → ...nents/Profile/ProfileLink/ProfileLink.css
@@ -1,4 +1,4 @@
-.github__link {
+.profile__header__link {
   display: flex;
   align-items: center;
   gap: 0.5em;
@@ -9,7 +9,7 @@
   }
 }
 
-.github__link a {
+.profile__header__link a {
   text-decoration: none;
   color: inherit;
 }
diff --git a/src/components/Profile/ProfileLink/ProfileLink.tsx b/src/components/Profile/ProfileLink/ProfileLink.tsx
@@ -0,0 +1,34 @@
+import { FaGithub, FaHouseUser, FaLinkedin } from "react-icons/fa";
+import "./ProfileLink.css";
+
+type ProfileLinks = {
+  github: string;
+  linkedin: string;
+  twitter: string;
+  website: string;
+};
+
+const ProfileLink = ({ links }: { links: ProfileLinks }) => {
+  return (
+    <>
+      <div className="profile__header__link">
+        <FaGithub />
+        <a href={`https://${links.github}`}>{links.github}</a>
+      </div>
+      <div className="profile__header__link">
+        <FaLinkedin />
+        <a href={`https://${links.linkedin}`}>{links.linkedin}</a>
+      </div>
+      <div className="profile__header__link">
+        <FaGithub />
+        <a href={`https://${links.twitter}`}>{links.twitter}</a>
+      </div>
+      <div className="profile__header__link">
+        <FaHouseUser />
+        <a href={`https://${links.website}`}>{links.website}</a>
+      </div>
+    </>
+  );
+};
+
+export default ProfileLink;